Unike nøkler via id i React

I koden ovenfor la vi til ordningsnummeret til elementet i arrayen i attributtet key. Egentlig er denne praksisen dårlig og bør bare brukes i ytterste nødstilfelle.

Grunnen er at ved sortering av arrayen vil elementene få andre nøkler, og React vil ikke kunne korrekt spore forbindelsen mellom elementene i arrayen og de tilsvarende taggene.

En bedre praksis er å legge til en unik identifikator for hvert produkt, som vil bli brukt som nøkkel.

La oss i vår array legge til en egenskap id med nummeret til vårt produkt for hvert produkt:

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

Nå bruker vi denne id som nøkkel:

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

Modifiser den forrige oppgaven ved å legge til id i arrayen og bruke dem som verdier for attributtet key.