2

I am using following snippet for providing index as a key.

[{},{},{}].map((item,index) => <li key={index}/>)
Darshan Sachaniya
  • 389
  • 2
  • 17
  • The first argument of the map function is the element itself, not the key. Also, like it says in the duplicates on this website, the react docs do mention this: https://reactjs.org/docs/lists-and-keys.html –  Feb 05 '21 at 07:21

1 Answers1

3

Of course, in React, you are required to pass in a unique key value for all elements of an array. Else, you will see this warning in console.

Warning: Each child in an array or iterator should have a unique “key” prop.

So, as a lazy developer, you would simply pass in the loop’s index value as the key value of the child element.

Reordering a list, or adding and removing items from a list can cause issues with the component state, when indexes are used as keys. If the key is an index, reordering an item changes it. Hence, the component state can get mixed up and may use the old key for a different component instance.

What are some exceptions where it is safe to use index as key?

  • If your list is static and will not change.
  • The list will never be re-ordered.
  • The list will not be filtered (adding/removing item from the list).
  • There are no ids for the items in the list.

Key should be unique but only among its siblings.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Darshan Sachaniya
  • 389
  • 2
  • 17