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()}
/>
You can use
<FlatList
data={[]}
keyExtractor={(item, index) => index.toString()}
/>
NOTE : Using index.toString() i.e expected to be string.
Have an 'id' in your data
const data = [
{
name: 'a',
id: 1
},
{
name: 'b',
id: 2
}];
<FlatList
data={data}
renderItem={
(item) => <Text>{item.name}</Text>
}
keyExtractor={item => item.id}
/>
Hope this helps !!!
This did not give any warning (transforming the index to a string):
<FlatList
data={[{name: 'a'}, {name: 'b'}]}
keyExtractor={(item, index) => index+"" }
renderItem={
(item) => <Text>{item.name}</Text>
}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With