Chaves únicas via id em React

No código acima, no atributo key adicionamos o índice do elemento no array. Na verdade, essa prática é ruim e deve ser usada apenas como último recurso.

O problema é que ao ordenar o array, os elementos terão outras chaves e o React não conseguirá rastrear corretamente a relação entre os elementos do array e as tags correspondentes.

Uma prática melhor será adicionar a cada produto um identificador único, que será usado como chave.

Vamos adicionar em nosso array a cada produto a propriedade id com o número do nosso produto:

jsxconst prods = [
  {id: 1, name: 'product1', cost: 100},
  {id: 2, name: 'product2', cost: 200},
  {id: 3, name: 'product3', cost: 300},
];

Agora, como chave, usamos este id:

jsxfunction App() {
  const res = prods.map(function(item) {
    return <p key={item.id}>
      <span>{item.name}</span>:
      <span>{item.cost}</span>
    </p>;
  });
  
  return <div>
    {res}
  </div>;
}