Warning Each child in a list should have a unique “key” prop

I have an array of objects which I use to list values in page with map. But from time to time I receive this error.

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

Although keys are unique.

Maybe anyone knows what could be wrong here?

const items = [
  {key: 1, name: 'Item one', value: 34 },
  {key: 2, name: 'Item two', value: 45 },
  {key: 3, name: 'Item three', value: 12 },
]

const item = ({ name, value, key }) => (
    <div>
      <p>{name}</p>
      <p>{value}</p>
    </div>
  )

return(
 <div>
   {items.map(i => item(i))}
 </div>
)

Answer

item needs to be a component, and React component names need to be capitalised. Your Item component is expecting an object. Your “key” needs to be placed on the mapped component.

// Accepts items
// From each object in the array it gets the
// key, name, and value, and returns a new
// component
function Example({ items }) {
  return (
    <div>
      {items.map(item => {
        const { key, value, name } = item;
        return <Item key={key} value={value} name={name} />
      })}
    </div>
   );
}

// Accepts an object - returns some JSX to be rendered
function Item({ name, value }) {
  return (
    <div>
      <p>{name}</p>
      <p>{value}</p>
    </div>
  );
}

const items = [
  {key: 1, name: 'Item one', value: 34 },
  {key: 2, name: 'Item two', value: 45 },
  {key: 3, name: 'Item three', value: 12 },
];

ReactDOM.render(
  <Example items={items} />,
  document.getElementById('react')
);

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