Unikalūs raktai per id React'e

Aukščiau pateiktame kode į key atributą mes pridėdavome elemento eilės numerį masyve. Tiesą sakant, tokia praktika yra prasta ir ja reikėtų naudotis tik kraštutiniais atvejais.

Esminė problema ta, kad surikiuojant masyvą, elementų raktai pasikeis ir React nebegalės tinkamai sekti ryšio tarp masyvo elementų ir atitinkamų tag'ų.

Geresne praktika būtų kiekvienam produktui pridėti unikalų identifikatorių, kuris ir bus naudojamas kaip raktas.

Pridėkime prie kiekvieno produkto mūsų masyve savybę id su mūsų produkto numeriu:

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

Dabar kaip raktą naudokime šį id:

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

Modifikuokite ankstesnį uždavinį, pridėdami į masyvą id ir panaudodami juos kaip atributo key reikšmes.