ReactBeginner

Lists ও Keys

array.map() দিয়ে list render ও unique key-এর গুরুত্ব — বাংলায়।

7টি অংশবাংলা ভাষায়

List render

map()jsx

jsx

const products = [
  { id: 1, name: "মোবাইল", price: 15000 },
  { id: 2, name: "ল্যাপটপ", price: 65000 },
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} — {product.price} টাকা
        </li>
      ))}
    </ul>
  );
}

কেন key দরকার

key React-কে বলে এই item-টি কার সাথে match — list বদলালে কোনটা update/remove করতে হবে। key না দিলে React warning দেখায় এবং অপ্রত্যাশিত bug হয়।

সঠিক key বাছুন

সেরা key — ডেটাবেস-এর id, slug বা unique value
index না — row সাজানো/filter করলে order বদলায়, state ভুল element-এ চলে যায়
key change হলে component remount হয় (state reset হয়)
দুটি ভিন্ন list-এ একই key থাকলে তেমন সমস্যা নেই — একই list-এর মধ্যে unique হলেই হবে

Key — ভালো ও খারাপjsx

jsx

// index key — শেষ উপায়
{items.map((item, index) => (
  <Item key={index} item={item} />
))}

// ভালো — stable unique value
{items.map((item) => (
  <Item key={item.id} item={item} />
))}

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।