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.

Answer 1

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}
    />
  ))}