Basic FlatList code throws Warning - React Native

FlatList does not seem to be working. I get this warning.

VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.

Code:

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    (item) => <Text key={Math.random().toString()}>{item.name}</Text>
  } 
  key={Math.random().toString()} />

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>
  } 
/>

A simple solution is to just give each entry a unique key before rendering with FlatList, since that's what the underlying VirtualizedList needs to track each entry.

 users.forEach((user, i) => {
    user.key = i + 1;
 });

The warning does advice doing this first, or provide a custom key extractor.

this code work for me :

const content = [
  {
    name: 'Marta',
    content: 'Payday in November: Rp. 987.654.321',
  },]
 
  <FlatList
      data= {content}
      renderItem = { ({ item }) => (
        <View style={{ flexDirection: 'column',             justifyContent: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: '300', color: '#000000' }}>{item.name}</Text>
      <Text style={{ color: '#000000' }}>{item.content}</Text>
        
        />
      )}
      keyExtractor={(item,index) => item.content}
    />

in case your Data is not an object : [in fact it is using each item index (in the array) as a key]

   data: ['name1','name2'] //declared in constructor
     <FlatList
  data= {this.state.data}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent={this.renderSeparator}
keyExtractor={(item, index) => index.toString()}
/>

Tried Ray's answer but then got an warning that "the key must be an string". The following modified version works well to suppress the original and this string key warning if you don't have a good unique key on the item itself:

keyExtractor={(item, index) => item + index}

Of course if you do have an obvious and good unique key on the item itself you can just use that.

Make sure to write return statement otherwise it will return nothing..Happened with me.

This worked for me:

<FlatList
  data={items}
    data={[{name: 'a'}, {name: 'b'}]} 
    keyExtractor = () => {
    return new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };
/>

This worked for me:

<FlatList
  data={items}
  renderItem={({ title }) => <Text>{title}</Text> }}
  keyExtractor={() => Math.random().toString(36).substr(2, 9)} />

Turning the keyExtractor into a string but instead of using index use a random generated number.

When I used keyExtractor={(item, index) => index.toString()}, It never worked and still kicked out a warning. But maybe this works for someone?