ReactJS : What is the best way to give keys in array element

The reason is Each <li> tag should have a unique key. You are assigning key=4 in your <li> tag as element 4 is duplicate in your array.

After Edit

My Bad, I didn't read the full question. use uuid package to generate new id: https://www.npmjs.com/package/uuid They have documentation as well.

Do this add a unique key as well as custom data

import React from 'react'; import ReactDOM from 'react-dom'; const Numbers = ['2', '4', '6', '8']; const NumbersList = (props) => ( <ul> { props.Numbers.map ( (number, i) => <li key={i} custom={number}>{number * 2}</li> ) } </ul> ) ReactDOM.render(<NumbersList Numbers = {Numbers} />, document.getElementById('root') ) 

The key prop should be unique so I gave the returned value from the map method, custom attribute will be the array data that you want to set for all the elements.

Congratulations, there's no simple answer. When mapping an array of strings (most usual case) you can't be sure they are going to be unique. So you can't use values as keys.

You could've used array indices as keys. But you can't because it's bad, even if it is a really static array. You just can't, it's bad, eslint said so.

I'd advice to write a simple helper-function. Like this:

const mapArray = (source: string[]) => source.map((value, index) => ({id: index, value})) 

It also mean ypu'll have to add a state to store this map and an effect to update it whenever the source changes. Or maybe you can write a hook, publish it on npm and make this world a slightly better place.

React expects repeated items (siblings) to have a key property so that it can distinguish between items on subsequent renders. This allows it to optimise rendering of the element graph as items come, go and change.

key is meant to be a string, but React will coerce a number to string for you. Your example is quite simplistic, its more normal for data to contain some unique item value (such as database record id) so that duplicate properties can be supported but still allow items to be distinguished. In the absence of an external id property, you could decide to add a unique identifier as part of state.

It's possible to use the items index in the list, but this will not always allow React to optimise the render cycle for items. This is why its discouraged if your data contains a unique item identifier.

React checks for duplicate and missing keys to avoid the most obvious mistakes that might cause the render cycle to be less efficient.

Reacts render optimisation will really make a difference to very long lists. For an application where the scope is likely to only be a few items, there won't be much gain, and therefore array index might be a reasonable solution.

Using the index as the key is an anti-pattern and always leads to bugs in any situation.

For the best answer - what would happen if somebody change the number behind the index 1 to, for example, 5? The displayed number will remain the same, because the key was not changed.

To bypass the issues caused by using index as a key for primitives, I recommend to use composite keys.

I would write the NumbersList component the next way:

const NumbersList = ({ numbers }) => ( <ul> {numbers.map((number, index) => ( <li key={`${index}:${number}`}>{number * 2}</li> )} </ul> );