I am working on my <FlatList> in React Native.
I have the ff flatlist code:
<FlatList
data={this.state.books}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}: {item: any}, index: number) =>
this.renderItem(item, index)
}
ListEmptyComponent={
<View style={styles.listEmpty}>
<Text style={styles.emptyText}>Not Reading any books</Text>
</View>
}
And then inside my renderItem function:
renderItem = (item: string, index: number) => (
<View style={styles.renderContainer}>
<View style={{flex: 1, justifyContent: 'center', paddingLeft: 10}}>
<Text>{item}</Text>
</View>
<TouchableOpacity onPress={() => console.log('hello')}>
<View style={styles.btnMarkRead}>
<Text style={{fontWeight: 'bold', color: 'black'}}>Mark as Read</Text>
</View>
</TouchableOpacity>
</View>
);
My typescript code is highlighting the word renderItem on my FlatList declaration and it saying:
No overload matches this call.
Overload 1 of 2, '(props: FlatListProps<String> | Readonly<FlatListProps<String>>): FlatList<String>', gave the following error.
Type '({ item }: { item: any; }, index: number) => JSX.Element' is not assignable to type 'ListRenderItem<String>'.
Overload 2 of 2, '(props: FlatListProps<String>, context: any): FlatList<String>', gave the following error.
I have the ff state:
this.state = {
totalCount: 0,
readingCount: 0,
doneCount: 0,
isAddNewBookVisible: false,
textInputData: '',
books: [],
};
What should I do to fix the highlight error?
use
({item, index}) => this.renderItem(item, index)
and give type for data passed to Flatlist if you want to refer example below
import React from 'react';
import {FlatList, View} from 'react-native';
interface PropsInterface {}
interface StateInterface {
books?: any[];
}
class ComponentName extends React.Component<PropsInterface, StateInterface> {
constructor(props: PropsInterface) {
super(props);
this.state = {
books: [],
};
}
renderItem = (item: any, index: number) => {
return <View></View>;
};
render() {
return (
<FlatList
data={this.state.books}
renderItem={({item, index}) => this.renderItem(item, index)}
/>
);
}
}