I have two sections that each define separate renderItem keys. Each section also has a different type, which SectionList doesn't seem to handle well. Is there something I am missing in defining the sections that could explain the typescript error?
const sections = [ { title: 'Templates', data: data.budget.allocationTemplateLines, renderItem: ({ item }: {item: AllocationTemplateLine}) => <Text style={{ color: 'white' }}>{item.allocationTemplate.name}</Text> }, { title: 'Recent Transactions', data: data.budget.recentAllocations, renderItem: ({ item }: {item: Allocation}) => <Text style={{ color: 'white' }}>{item.transaction.name}</Text> }, ]
<SectionList sections={sections} ...
Here is the typescript error I am getting:
No overload matches this call. Overload 1 of 2, '(props: Readonly<SectionListProps<GetBudget_budget_allocationTemplateLines>>): SectionList<GetBudget_budget_allocationTemplateLines>', gave the following error. Type '({ title: string; data: GetBudget_budget_allocationTemplateLines[]; renderItem: ({ item }: { item: GetBudget_budget_allocationTemplateLines; }) => Element; } | { ...; })[]' is not assignable to type 'readonly SectionListData<GetBudget_budget_allocationTemplateLines>[]'. Type '{ title: string; data: GetBudget_budget_allocationTemplateLines[]; renderItem: ({ item }: { item: GetBudget_budget_allocationTemplateLines; }) => Element; } | { ...; }' is not assignable to type 'SectionListData<GetBudget_budget_allocationTemplateLines>'. Type '{ title: string; data: Allocation[]; renderItem: ({ item }: { item: Allocation; }) => JSX.Element; }' is not assignable to type 'SectionListData<GetBudget_budget_allocationTemplateLines>'. Types of property 'data' are incompatible. Type 'GetBudget_budget_recentAllocations[]' is not assignable to type 'readonly GetBudget_budget_allocationTemplateLines[]'. Property 'allocationTemplate' is missing in type 'GetBudget_budget_recentAllocations' but required in type 'GetBudget_budget_allocationTemplateLines'. Overload 2 of 2, '(props: SectionListProps<GetBudget_budget_allocationTemplateLines>, context?: any): SectionList<GetBudget_budget_allocationTemplateLines>', gave the following error. Type '({ title: string; data: GetBudget_budget_allocationTemplateLines[]; renderItem: ({ item }: { item: GetBudget_budget_allocationTemplateLines; }) => Element; } | { ...; })[]' is not assignable to type 'readonly SectionListData<GetBudget_budget_allocationTemplateLines>[]'.