As a newcomer to programming, I recently started working with React Native. I attempted to create a FlatList, which was successful, but the data did not display as I intended. I realized I needed a header to organize the data the way I wanted, so I discovered the <SectionList> component. I modified the code to incorporate it, but upon adding the data, I encountered the following error:
(property) sections: readonly SectionListData<any, GamesInfoSection>[]
An array of objects with data for each section.
No overload matches this call.
Overload 1 of 2, '(props: SectionListProps<any, GamesInfoSection> | Readonly<SectionListProps<any, GamesInfoSection>>): SectionList<...>', gave the following error.
Type 'GamesInfoSection[] | undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
Type 'undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
Overload 2 of 2, '(props: SectionListProps<any, GamesInfoSection>, context: any): SectionList<any, GamesInfoSection>', gave the following error.
Type 'GamesInfoSection[] | undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
Type 'undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.ts(2769)
SectionList.d.ts(210, 3): The expected type comes from property 'sections' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, GamesInfoSection>> & Readonly<...>'
SectionList.d.ts(210, 3): The expected type comes from property 'sections' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, GamesInfoSection>> & Readonly<...>'
This is the complete component:
<SectionList
sections={games}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
<View style={styles.game_section}>
<View style={styles.game_match}>
<View style={styles.game_time}>
<Text>{item.games?.time}</Text>
</View>
<View style={styles.breakLine}>
</View>
<View style={styles.game_team}>
<View style={styles.team}>
<View style={styles.team_brand}></View>
<Text style={styles.team_name}>{item.games?.home}</Text>
</View>
<View style={styles.team}>
<View style={styles.team_brand}> </View>
<Text style={styles.team_name}>{item.games?.away}</Text>
</View>
</View>
<View style={styles.breakLine}>
</View>
<View style={styles.score}>
<View style={styles.team}>
<Text style={styles.team_name}>{item.games?.homeScore}</Text>
</View>
<View style={styles.team}>
<Text style={styles.team_name}>{item.games?.homeScore}</Text>
</View>
</View>
</View>
</View>
)}
renderSectionHeader={({ section: { infoSection } }) => (
<View style={styles.game_info}>
<Text style={styles.game_country}>{infoSection?.country}</Text>
<Text style={styles.game_league}>{infoSection?.league}</Text>
</View>
)}
/>
This is the data const:
const [games, setGames] = useState<GamesInfoSection[]>();
useEffect(() => {
try {
const api = setupApiGames();
api?.get('/games').then(response => {
setGames(response.data);
}
)
} catch (error) {
console.log(error + 'error ao acessar os Jogos');
}
}, [])
I attempted to implement the suggested solution by VScode:
sections={games as any}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
However, this did not resolve the issue. The error disappeared, but the application did not display anything other than a blank white page, even after removing components outside of the "SectionList".