Unikke nøgler via id i React

I ovenstående kode tilføjede vi elementets rækkenummer i arrayet i attributten key. I virkeligheden er denne praksis dårlig, og den bør kun bruges i yderste tilfælde.

Grunden er, at når arrayet sorteres, får elementerne andre nøgler, og React vil ikke være i stand til korrekt at spore forbindelsen mellem arrayets elementer og de tilsvarende tags.

En bedre praksis vil være at tilføje et unikt id til hvert produkt, som vil blive brugt som nøgle.

Lad os i vores array tilføje en egenskab id med vores produkts nummer til hvert produkt:

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

Nu bruger vi denne id som nøgle:

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

Modificer den forrige opgave ved at tilføje id til arrayet og bruge dem som værdier for attributten key.