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