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