Unikaalsed võtmed id kaudu Reactis

Ülaltoodud koodis lisasime atribuudile key elemendi järjekorranumbri massiivis. Tegelikult on selline praktika halb ja seda tuleks kasutada ainult äärmisel juhul.

Asi on selles, et massiivi sorteerimisel saavad elementidel teised võtmed ja React ei sua õigesti jälgida seost massiivi elementide ja vastavate siltide vahel.

Paremaks praktikaks oleks lisada igale tootele unikaalne identifikaator, mis ja seda kasutatakse võtmena.

Lisame oma massiivis igale tootele omaduse id oma toote numbriga:

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

Nüüd kasutame võtmena seda id-d:

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

Modifitseerige eelmist ülesannet, lisades massiivi id ja kasutades neid atribuudi key väärtustena.