Unikāli atslēgas ar id React

Iepriekš minētajā kodā atribūtā key mēs pievienojām elementa kārtas numuru masīvā. Patiesībā šāda prakse ir slikta, un to vajadzētu izmantot tikai ārkārtējos gadījumos.

Lieta ir tāda, ka, kārtojot masīvu, elementiem būs citas atslēgas, un React nevarēs pareizi izsekot saiknei starp masīva elementiem un atbilstošajiem tagiem.

Labāka prakse būtu katram produktam pievienot unikālu identifikatoru, kas tiks izmantots kā atslēga.

Pievienosim mūsu masīvā katram produktam īpašību id ar sava produkta numuru:

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

Tagad kā atslēgu izmantosim šo 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>;
}

Modificējiet iepriekšējo uzdevumu, pievienojot masīvam id un izmantojot tos kā atribūta key vērtības.