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

Question

I am just starting with ReactJS and tried solutions of other questions similar to this but no luck so far.

Here is my working code :

import React from 'react';
import ReactDOM from 'react-dom';


const Numbers = ['2', '4', '6', '8'];

const NumbersList = (props) => (
   <ul>
      {
          props.Numbers.map (
             number => <li key={number}>{number * 2}</li>
          )
      }
    </ul>
)
ReactDOM.render(<NumbersList Numbers = {Numbers} />, document.getElementById('root') )

But when I am passing Numbers Array as :

const Numbers = ['4', '4', '6', '8']

I am getting this error :

Warning: Encountered two children with the same key, 4. Keys should be unique so that components maintain their identity across updates.

So my Question is : What is the best way to give keys in this situation? And if I am using Number (as in above example) as Keys, what is the best solution to avoid this warning?

Thank You!

Answer 1

When you don't have a definitive unique property for the items (a list of non unique primitives), you can use the index.

Note: don't use the index if the items have a unique id (and a non-primitives list should), because it's an anti-pattern.

const Numbers = ['2', '4', '4', '8'];

const NumbersList = (props) => (
  <ul>
  {
  props.Numbers.map (
    (number, index) => <li key={index}>{number * 2}</li>
  )}
  </ul>
)

ReactDOM.render(
  <NumbersList Numbers = {Numbers} />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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> );

Answer 7

Add a variable changing the index:

{weekList.map((date, index) => {
  const x = index + 1 // <<<--- Just do it
  return(
  <React.Fragment key={x}>
    start: {date.startDate.format("YYYY-MM-DD")} end:{" "}
    {date.endDate.format("YYYY-MM-DD")}
  </React.Fragment>
)})}

Answer 8

React uses keys to identify which elements have changed, added or are removed.

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.

It is not recommended to use array indexes as key because you may update/remove the element from an array but indexes will remain same so React will not be able to identify the change and will display the wrong results.

In your code, you don't have any unique id for array elements so the only thing you can use to make it unique is array indexes.

const Numbers = ['2', '4', '4', '8'];

const NumbersList = (props) => (
  <ul>
  {
  props.Numbers.map (
    (number, index) => <li key={index}>{number * 2}</li>
  )}
  </ul>
)

ReactDOM.render(
  <NumbersList Numbers = {Numbers} />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>