Unikaalsed võtmed id kaudu Reactis

Ülaltoodud koodis lisasime atribuudile key elemendi järjekorranumbri massiivis. Tegelikult on selline praktika halb ja seda tuleks kasutada ainult äärmisel juhul.

Asi on selles, et massiivi sorteerimisel saavad elementidel teised võtmed ja React ei sua õigesti jälgida seost massiivi elementide ja vastavate siltide vahel.

Paremaks praktikaks oleks lisada igale tootele unikaalne identifikaator, mis ja seda kasutatakse võtmena.

Lisame oma massiivis igale tootele omaduse id oma toote numbriga:

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

Nüüd kasutame võtmena seda id-d:

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