Basic FlatList code throws Warning - React Native
Simply do this:
<FlatList
data={[{name: 'a'}, {name: 'b'}]}
renderItem={
({item}) => <Text>{item.name}</Text>
}
keyExtractor={(item, index) => index.toString()}
/>
Source: here
You don't need to use keyExtractor
. The React Native docs are a little unclear but the key
property should go in each element of the data
array rather than in the rendered child component. So rather than
<FlatList
data={[{id: 'a'}, {id: 'b'}]}
renderItem={({item}) => <View key={item.id} />}
/>
// React will give you a warning about there being no key prop
which is what you'd expect, you just need to put a key
field in each element of the data
array:
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <View />}
/>
// React is happy!
And definitely don't put a random string as the key.
This worked for me:
<FlatList
data={[{name: 'a'}, {name: 'b'}]}
keyExtractor={(item, index) => index.toString()}
/>