Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

React Native SectionList typescript error when sections contain different types

$
0
0

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>[]'.

Viewing all articles
Browse latest Browse all 6212

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>