Unika nycklar via id i React

I koden ovan lade vi till elementets ordningsnummer i arrayen i attributet key. I verkligheten är denna praxis dålig och bör endast användas i extrema fall.

Anledningen är att när arrayen sorteras kommer elementen få andra nycklar och React kommer inte att kunna spåra kopplingen mellan arrayelementen och motsvarande taggar korrekt.

En bättre praxis är att lägga till en unik identifierare för varje produkt, som kommer att användas som nyckel.

Låt oss i vår array lägga till egenskapen id med vårt produktnummer för varje produkt:

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

Nu använder vi detta id som nyckel:

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

Modifiera den föregående uppgiften genom att lägga till id i arrayen och använda dem som värden för attributet key.