CODEWITHSUNDEEP
arraysreact-nativereact-native-flatlist
jdoej
jdoej

Reputation: 763

React Native - Use a keyExtractor with FlatList

I have been getting the: 

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

pretty confusing..., the array i am passing it has a key property defined in each object in the array. I have that array defined in this.state. I ran a quick print out in the console to be sure: print out of array

Each object in array is defined as:

  var obj = {key: doc.id, value: doc.data()};

(doc and data being from another part of my app, but I know doc.id is unique)

After some googling I then tried to define a Key Extractor like so:

_keyExtractor = (item, index) => item.key;

and then here is my flatlist definition:

  <FlatList
        style={{}}
        data={this.state.FeedDataCollection}
        keyExtractor={this._keyExtractor}
        renderItem={(rowData) =>this.RenderFeedCard(rowData)}
      />

Still receiving the same error, at this point not really sure how to handle this or what it is doing wrong. Any Ideas? Thanks so much!

Upvotes: 54

Views: 136963

Answers (10)

Engr.Aftab Ufaq
Engr.Aftab Ufaq

Reputation: 6346

keyExtractor ={(item, index) => `${item.key}${index}`}

this worked for me. Don't need to concatenate strings also this will work if you dont have any unique key.

keyExtractor = {(item, index) => `${index}`}

Upvotes: 2

Sarantis Tofas
Sarantis Tofas

Reputation: 5167

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

This is a warning that the elements of the list are missing keys. These unique keys are what allow the VirtualizedList (which is what FlatList is built on) to track items and are really important in terms of efficiency.

You will have to choose a unique key prop, like an id or an email.

The keyExtractor falls back to using the index by default. But the warning will remain visible.

Example: an object defined as {key: doc.id, value: doc.data()} can be used in the extractor as:

keyExtractor={(item, index) => item.key}

Flatlist component should look like that:

<FlatList
  style={{}}
  data={this.state.FeedDataCollection}
  keyExtractor={(item, index) => item.key}
  renderItem={(rowData) =>this.RenderFeedCard(rowData)}
/>

Upvotes: 62

Daniel
Daniel

Reputation: 15433

The importance of this error is at the point where you start to change or delete any of the objects of your array because of how your list will get updated if you don't provide that key.

The way React Native deals with a change to your list without a key is to delete everything visible on the screen and then looks at the new array of data and renders a single element for each one.

We don't want React Native to rebuild an entire list just because of one small change to the array of data. Ideally, we want React Native to detect specifically the object we deleted or changed and update accordingly, but that will not happen if we do not provide the key.

The key property allows React Native to track these list of objects and that way it can keep track of what you are modifying or deleting and just delete that particular element with a particular key.

This way the list does not need to be rebuilt from scratch. The key will allow React Native to tie the definition of an object of data with some element that appears on the screen.

It's just allowing React Native to track the different list of objects we are rendering to the screen. It's also a performance optimization on making updates to our list.

Upvotes: 4

Deep Adhia
Deep Adhia

Reputation: 393

keyExtractor={(item, index) => 'key'+index} worked for me.

Upvotes: 1

ABS Shohag
ABS Shohag

Reputation: 11

this will work sure. First generate random number.

let generateRandomNum = () => Math.floor(Math.random() * 1001);

then call where you need generate random number. like :-

{ id: generateRandomNum().toString(), value: 'your value'}

//below i share small part of my code for better understand

const addGoalHandler = enteredInputGoal => {
console.log('random nub', generateRandomNum());
setCourseGoals(courrentGoals => [...courrentGoals, { id: generateRandomNum().toString(), value: enteredInputGoal }]);
  };

and finally use in FlatList

<FlatList keyExtractor={(item, index) => item.id} data={courseGoals} renderItem={itemData =>itemData.item.value } />

Upvotes: 1

Ahmad Khani
Ahmad Khani

Reputation: 978

Actually, in my case, FlatList data prop value was not an array type (it was empty object) so when I add keyExtractor={(item, index) => item.key} it made an error.

I hope it helps you.

Upvotes: 1

testFireAcc Fire
testFireAcc Fire

Reputation: 29

Best unique key extractor for react native

function looks like: 

  keyExtractor = item => {
    return item.id.toString() + new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };

or without item fields:

  keyExtractor = () => {
    return new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };

Upvotes: 1

amirhosein
amirhosein

Reputation: 921

i do this and work for me:

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

Upvotes: 40

Rotem Shaanan
Rotem Shaanan

Reputation: 83

Try using listkey instead of keyExtractor, it worked for me

Upvotes: 0

brownmagik352
brownmagik352

Reputation: 396

@Sarantis Tofas has the correct answer. Solved it for me! Two additional notes based on the comments:

  1. If you use index then make sure to use index.toString() or you'll get a different warning (Failed child context type - type number supplied to CellRenderer expected string).
  2. FlatList will work with index by default if you don't have key properties or a keyExtractor defined, but it will still throw a warning.

Upvotes: 2

Related Questions