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

Question

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

Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Okan Karadag, Mar 31 '22 at 13:39
@Okan Karadag Sorry, not yet. I still don't understand what should happen if for instance i have several components and at will all the same keys. Like
Than it's gonna be error same keys. And where do i take so many keys ? Sorry for silly questions) — Karina Shulan, Mar 31 '22 at 14:36
@Andy Hi Andy, thank you for answer. But in your code you don't use const item — Karina Shulan, Mar 31 '22 at 14:37
Hi @KarinaShulan, that's because I like function declarations over function expressions. It's just a personal coding choice. Welcome to Stackoverflow. There are a lot of people here who are opinionated about their code, so a lot of code is different. But we're here to try and help. I do think `Item` needs to be its own component however. — Andy, Mar 31 '22 at 14:52

Andy · Accepted Answer · 2022-03-31T14:07:45.430

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>

score 0 · Answer 2 · answered Mar 31 '22 at 13:37

you just need to pass the key in child div as I have done in your code below. I think it will remove your error below

import React from 'react';
import './style.css';

export default function App() {
  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 key={key}>
      <p>{name}</p>
      <p>{value}</p>
    </div>
  );
  return <div>{items.map((i) => item(i))}</div>;
}

For refer:https://reactjs.org/docs/lists-and-keys.html

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

2 Answers2