Çelësat Unikë përmes id në React

Në kodin e paraqitur më sipër, në atributin key ne kemi shtuar numrin rendor të elementit në grup. Në fakt, kjo praktikë konsiderohet e keqe dhe duhet përdorur vetëm në raste të rralla.

Arsyeja është se kur renditet grupi, elementët do të kenë çelësa të ndryshëm dhe React nuk do të jetë në gjendje të ndjekë saktë marrëdhënien midis elementëve të grupit dhe etiketave përkatëse.

Një praktikë më e mirë do të ishte të shtonim për çdo produkt një identifikues unik, i cili do të përdorej si çelës.

Le të shtojmë në grupin tonë për çdo produkt vetinë id me numrin e produktit tonë:

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

Tani si çelës do të përdorim këtë 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>;
}

Modifikoni detyrën e mëparshme, duke shtuar në grupin id dhe duke i përdorur ato si vlera të atributit key.