React-də id vasitəsilə unikal açar lar

Yuxarıdakı kodda key atributuna biz elementin massivdəki sıra nömrəsini əlavə edirdik. Əslində belə bir təcrübə pis hesab olunur və yalnız çox zəruri hallarda istifadə edilməlidir.

Bunun səbəbi odur ki, massiv çeşidləndikdə elementlərin açar ları dəyişəcək və React massiv elementləri ilə uyğun teq-lər arasında əlaqəni düzgün izləyə bilməyəcək.

Daha yaxşı təcrübə hər bir məhsula unikal identifikator əlavə etmək olardı, hansı ki, açar kimi istifadə olunacaq.

Gəlin bizim massivimizdə hər bir məhsula öz id xüsusiyyətini nömrə ilə əlavə edək:

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

İndi açar kimi bu id-dən istifadə edək:

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