problem

When the app gets loaded for the first time.The flatlist gives a waring and displays "Warning: Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.%s"

But this warning is only when it loaded for the first time. When saving the file again. Where the flatlist is located the warning disappears

I have tried to fix it with by using the key extractor in different ways

1

<FlatList
  ref={flatListRef}
  data={data}
  keyExtractor={(item)=> item._id.toString()}
  renderItem={renderItem} 
/>

2

const keyExtractor = useCallback((item)=> item.postId,[])

<FlatList
  ref={flatListRef}
  data={data}
  keyExtractor={(item)=> item._id.toString()}
  renderItem={renderItem} 
/>

But the warning keeps on coming back on when the app is loaded for the first time.

question

Whats the correct way to use the keyExtractor and how do to prevent the warning for happening.

Solution

One of the render components triggered a map function where there was no key given.

CodePudding user response：

Check if your mapping any views using (.map) function if you are maping views then give the main container key={index}

CodePudding user response：

Try with index like this

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