Chei unice prin id în React

În codul de mai sus, în atributul key am adăugat numărul de ordine al elementului din tablou. De fapt, această practică este considerată necorespunzătoare și ar trebui folosită doar în cazuri extreme.

Problema este că atunci când sortăm tabloul, elementele vor primi alte chei și React nu va putea urmări corect legătura dintre elementele tabloului și tagurile corespunzătoare.

O practică mai bună ar fi să adăugăm fiecărui produs un identificator unic, care va fi utilizat ca cheie.

Să adăugăm în tabloul nostru fiecărui produs o proprietate id cu numărul produsului nostru:

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

Acum folosim acest id ca cheie:

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

Modificați sarcina anterioară, adăugând în tablou id și folosindu-le ca valori pentru atributul key.