Reactda id orqali noyob kalitlar

Yuqoridagi kodda key atributiga biz elementning massivdagi tartib raqamini qo'shgan edik. Aslida bunday amaliyot yomon hisoblanadi va faqat eng zaruratli hollarda foydalanish kerak.

Masala shundaki, massivni saralashda elementlarning kalitlari o'zgaradi va React massiv elementlari va mos keladigan teglar o'rtasidagi bog'liqlikni to'g'ri kuzata olmaydi.

Yaxshiroq amaliyot har bir mahsulotga noyob identifikator qo'shish bo'ladi, u esa kalit sifatida ishlatiladi.

Keling, bizning massivimizda har bir mahsulotga id xususiyatini mahsulot raqami bilan qo'shamiz:

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

Endi kalit sifatida shu id dan foydalanamiz:

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