Unieke sleutels via id in React

In de bovenstaande code voegden we het volgnummer van het element in de array toe aan het key attribuut. In werkelijkheid is deze praktijk slecht en mag deze alleen in uiterste gevallen worden gebruikt.

Het probleem is dat wanneer de array wordt gesorteerd, de elementen andere sleutels krijgen en React niet langer correct de relatie tussen de array-elementen en de bijbehorende tags kan volgen.

Een betere praktijk is om aan elk product een unieke identifier toe te voegen, die zal worden gebruikt als sleutel.

Laten we in onze array aan elk product een eigenschap id toevoegen met het nummer van ons product:

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

Laten we nu deze id als sleutel gebruiken:

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

Pas de vorige opdracht aan door id aan de array toe te voegen en deze te gebruiken als waarden voor het key attribuut.