React'те id аркылуу уникалдуу ачкычтар

Жогоруда көрсөтүлгөн коддо 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>;
}