Ç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ë:

jsxconst 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:

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