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:

const 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:

function 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>;
}

Modifique a tarefa anterior, adicionando ao array um id e usando-os como valores do atributo key.