Edinstveni ključi prek id v React

V zgornji kodi smo v atribut key dodali zaporedno številko elementa v polju. Pravzaprav je ta praksa slaba in jo je treba uporabljati le v skrajnih primerih.

Bistvo je v tem, da bodo elementi ob razvrščanju polja dobili druge ključe in React ne bo mogel pravilno slediti povezavi med elementi polja in ustreznimi oznakami.

Boljša praksa je, da vsakemu izdelku dodamo edinstven identifikator, ki bo uporabljen kot ključ.

Dodajmo v našem polju vsakemu izdelku lastnost id s številko našega izdelka:

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

Zdaj uporabimo ta id kot ključ:

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

Spremenite prejšnjo nalogo tako, da dodate v polje id in jih uporabite kot vrednosti atributa key.