Reactда id орқали уникал калитлар

Юқорида келтирилган кодда key атрибутига биз массивдаги элементнинг тартиб рақамини қўшган эдик. Аслида, бундай амалиёт ёмон ҳисобланади ва фақат eng oxirgi holatda фойдаланиш керак.

Гапи шундаки, массивни saralash пайтида элементларнинг калитлари ўзгариб қолади ва React массив элементлари ва мос теглар ўртасидаги боглиқликни тўғри кузата олмайди.

Яхшироқ амалиёт ҳар бир mahsulotга уникал идентификатор қўшиш бўлиб, шу калит сифатида ишлатилади.

Келинг, бизнинг массивимизда ҳар бир mahsulotга id хусусиятини бизнинг mahsulot рақами билан қўшайлик:

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