My console shows me a key problem in react and I can't solve it

Question

Here is my function in ShoppingList.js,

`

function ShoppingList() {
  return (
    <ul className="lmj-plant-list">
      {plantList.map(({ id, cover, title, description }) => (
        <PlantItem
          to={"/logement/" + plantList.id + "/#"}
          id={id}
          title={title}
          cover={cover}
          description={description}
        />
      ))}
    </ul>
  );
}

` I retrieve the data here and post it on PlantItem, it works but i have an error which is displayed in the console

the console :

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ShoppingList`. See https://reactjs.org/link/warning-keys for more information.
    at div
    at ShoppingList
    at div
    at App
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:39974:5)
    at Routes (http://localhost:3000/static/js/bundle.js:40397:5)
    at Router (http://localhost:3000/static/js/bundle.js:40335:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:38682:5)

I'm new to react and I can't fix this little problem.

add a `key={some_unique_value}` to the outer most element inside map i.e., `PlantItem` here ... — KcH, Dec 25 '22 at 17:54
Some more reading to understand the issue : https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js — Emilien, Dec 25 '22 at 17:57

Arian Hosseini · Accepted Answer · 2022-12-25T18:33:45.360

In React, When you need to loop on Components, You have to set the key prop for that component, So React will be able to keep track of the changes, For example, Imagine You have 100 PlantItem components rendered, How can React notice that PlantItem number 78 has changed?!

So here's how you can solve it:

    function ShoppingList() {
  return (
    <ul className="lmj-plant-list">
      {plantList.map(({ id, cover, title, description }) => (
        <PlantItem
          to={"/logement/" + plantList.id + "/#"}
          id={id}
          title={title}
          cover={cover}
          key={id}
          description={description}
        />
      ))}
    </ul>
  );
}

You can also set the value of key prop using index which map method gives you as the second argument.

 {plantList.map(({ id, cover, title, description }, index) => (
    <PlantItem
      to={"/logement/" + plantList.id + "/#"}
      id={id}
      title={title}
      cover={cover}
      key={index}
      description={description}
    />
  ))}

score 0 · Answer 2 · answered Dec 25 '22 at 18:27

In React, whenever you display same component multiple times with different information, in your case the PlantItem component, react needs to keep the track of every item component individually so that it can accommodate the changes for the exact same item. This can be done by including a "key" prop in the component alongside another information. This key will make sure that every PlantItem is uniquely identified and handled. But make sure that the value of key prop should be unique and it should not be same for any two components. For analogy you can consider key prop as a primary key of a database, which is unique and is not same for any two same records. So the solution is simple.

Solution-1)Assuming that the "id" you receive along with cover, title and description, in the object is always unique:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
function ShoppingList() {
  return (
    <ul className="lmj-plant-list">
      {plantList.map(({ id, cover, title, description }) => (
        <PlantItem
          key= id,
          to={"/logement/" + plantList.id + "/#"}
          id={id}
          title={title}
          cover={cover}
          description={description}
        />
      ))}
    </ul>
  );
}

Solution-2) If "id" is not unique the workaround is having a "idx" variable which will have the current count of the item and which is always unique:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
function ShoppingList() {
  return (
    <ul className="lmj-plant-list">
      {plantList.map(({ id, cover, title, description },idx) => (
        <PlantItem
          key= idx,
          to={"/logement/" + plantList.id + "/#"}
          id={id}
          title={title}
          cover={cover}
          description={description}
        />
      ))}
    </ul>
  );
}

For more info have a look at this stack overflow thread which explains it in detail

My console shows me a key problem in react and I can't solve it

2 Answers2