უნიკალური გასაღებები id-ის მეშვეობით React-ში

ზემოთ მოცემულ კოდში ატრიბუტ key-ში ჩვენ ვამატებდით ელემენტის რიგით ნომერს მასივში. სინამდვილეში, ასეთი პრაქტიკა არის ცუდი და მას მხოლოდ უკანასკნელ შემთხვევაში უნდა მივმართოთ.

საქმე იმაშია, რომ მასივის დალაგებისას ელემენტებს მიიღებენ სხვა გასაღებები და React-ს არ შეეძლება სწორად აკონტროლოს კავშირი მასივის ელემენტებსა და შესაბამის ტეგებს შორის.

უკეთესი პრაქტიკა იქნება თითოეულ პროდუქტს დავუმატოთ უნიკალური იდენტიფიკატორი, რომელიც და გამოყენებულ იქნება გასაღების როლში.

მოდით ჩვენს მასივში თითოეულ პროდუქტს დავუმატოთ თვისება id ჩვენი პროდუქტის ნომრით:

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

ახლა გასაღების როლში გამოვიყენოთ ეს 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>;
}