How to fix ‘Each child in an array or iterator should have a unique “key” prop’ with React?

To fix ‘Each child in an array or iterator should have a unique "key" prop’ with React, we add the key prop to the items being rendered with map.

For instance, we write

<div className="container">
  {myarray.map((element, index) => {
    return <div key={"mykey" + index}>{element}</div>;
  })}
</div>;

to call map with a function that renders divs.

We add the key prop to the div so React can identify each component being rendered.