CODEWITHSUNDEEP
react-native
Edison D'souza
Edison D'souza

Reputation: 4640

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

Upvotes: 163

Views: 85434

Answers (13)

Raj Shah
Raj Shah

Reputation: 738

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();  };
/>

Upvotes: 2

Hamza Ahmed
Hamza Ahmed

Reputation: 31

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

Upvotes: 0

Ray
Ray

Reputation: 9674

Simply do this:

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

Source: here

Upvotes: 374

Ramusesan
Ramusesan

Reputation: 904

You can use

 <FlatList   
  data={[]}  
  keyExtractor={(item, index) => index.toString()} 
 />

NOTE : Using index.toString() i.e expected to be string.

Upvotes: 14

JulienRioux
JulienRioux

Reputation: 3092

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

Upvotes: 4

Mahgolsadat Fathi
Mahgolsadat Fathi

Reputation: 3325

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

Upvotes: 2

Yogaraj Saravanan
Yogaraj Saravanan

Reputation: 443

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 !!!

Upvotes: 7

CodeBrew
CodeBrew

Reputation: 7187

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.

Upvotes: 0

rjh
rjh

Reputation: 181

This worked for me: 

<FlatList
  data={[{name: 'a'}, {name: 'b'}]} 
  keyExtractor={(item, index) => index.toString()}
/>

Upvotes: 18

harisman nug
harisman nug

Reputation: 56

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

Upvotes: 2

undefined
undefined

Reputation: 2491

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?

Upvotes: -3

Pandemonium
Pandemonium

Reputation: 8390

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.

Upvotes: 3

Ben
Ben

Reputation: 726

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.

Upvotes: 49

Related Questions