N Kaushik

Fix-React Native error Each child in a list should have a unique "key" prop

April 08, 2021

React Native error Each child in a list should have a unique “key” prop:

This error is thrown by react native if more than one child element in FlatList has the same key. It will show one error message as like below:

React Native error Each child in a list should have a unique "key" prop

While loading items in a FlatList, we have to pass one keyExtractor that assigns one key for each element in the FlatList.

<FlatList
  data={DATA}
  renderItem={renderItem}
  keyExtractor={item => item._id}
 />

So, if we have two or more items with the same key, this error is thrown. Normally, if you are getting data from the server and if the id of each item is separate, it will not throw any error.

But, if you are getting this error, you can:

  • either make it sure that the server is sending unique keys/ids.
  • You can create one unique id by using its different properties.

Subscribe to my Newsletter

© 2021, nkaushik