Each child in a list should have a unique "key" prop. All list objects have unique id but I still get an error

Question

I have some objects in data.json file looking like this:

[{
    "id": "1",
    "srcImg": "https://upload.wikimedia.org/wikipedia/en/5/5a/Wearethechampions.jpg",
    "name": "We are the champions"
}]

All id inside of json are unique. There is my react code:

function MusicLi({ item }) { //we take item from map() in MusicList function 
  return (
    <div>
      <li key={item.id}>
        <img src={item.srcImg}/>
        <p>{item.name}</p>
      </li>
    </div>
  );
}

function MusicList() {
  return (
    <div>
      {data.map((item) => ( //data - imported json
        <MusicLi item={item}/> // send item object to MusicLi function
      ))}
    </div>
  );
}

Answer 1

Try this:

function MusicLi({ item }) { //we take item from map() in MusicList function 
  return (
    <div key={item.id}>
      <li>
        <img src={item.srcImg}/>
        <p>{item.name}</p>
      </li>
    </div>
  );
}

Move the key to your top element.

Answer 2

You will required to update the code like

function MusicLi({ item }) {
  return (
    <div key={`sample_${item.id}`}>
      <li key={item.id}>
        <img src={item.srcImg}/>
        <p>{item.name}</p>
      </li>
    </div>
  );
}

You can define every element unique key.