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