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

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

• javascript
• reactjs

• 2 Does this answer your question? Understanding unique keys for array children in React.js – Okan Karadag Commented Mar 31, 2022 at 13:39
• @Okan Karadag Sorry, not yet. I still don't understand what should happen if for instance i have several ponents and at will all the same keys. Like <div key ={key}><p key={key}></p><div/> Than it's gonna be error same keys. And where do i take so many keys ? Sorry for silly questions) – Karina Shulan Commented Mar 31, 2022 at 14:36
• 1 @Andy Hi Andy, thank you for answer. But in your code you don't use const item – Karina Shulan Commented Mar 31, 2022 at 14:37
• Hi @KarinaShulan, that's because I like function declarations over function expressions. It's just a personal coding choice. Wele 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 ponent however. – Andy Commented Mar 31, 2022 at 14:52

3 Answers 3

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

// Accepts items
// From each object in the array it gets the
// key, name, and value, and returns a new
// ponent
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./ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

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/docs/lists-and-keys.html

every iteration should have key prop

<p>
 {["Item1", "Item2", "Item3"].map(item =>
 <span key="{item}">{item}</span>
 )}
</p>