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.

Tags:

React Native