React keys - рендеринг 2 повторяющихся элементов в списке - как избежать такого же ключевого предупреждения, поскольку одни и те же элементы предназначены без использования индекса в качестве ключа?

Question

У меня есть галерея предметов. 2 элемента всегда будут одинаковыми для игры с картой памяти (запомнив 2 совпадающих изображения). Теперь, если я сопоставлю, я получаю сообщение об ошибке, что каждый ребенок должен иметь уникальный ключ, поскольку я указываю идентификатор в качестве ключа. Однако 2 элемента, которые я визуализирую, точно такие же. Единственный способ, который я вижу, - указать индекс в качестве ключа, что нехорошо.

Как я могу сделать это, не передавая index.

state = {
 cards: [
   {id: 132, src="example.com/hello"},
   {id: 142, src="example.com/bye"},
   {id: 132, src="example.com/hello"},
   {id: 142, src="example.com/bye"}
 ]
}
this.state.cards.map((card)=> {
  return <div key={card.id}><img src={card.src} /> <div/>
}

Answer 1

@sushant по существу ответил, но вот код

this.state.cards.map((card,index)=> {
  return <div key={index}><img src={card.src} /> <div/>
}