বেশিরভাগ বাস্তব ইন্টারফেস কোনো কিছুর একটি লিস্ট দেখায় — প্রোডাক্ট, কমেন্ট, পাঠ। React সাধারণ JavaScript-এর .map() দিয়ে লিস্ট রেন্ডার করে, JavaScript Arrays পাঠ-এর অ্যারে মেথড, কোনো বিশেষ টেমপ্লেট লুপ সিনট্যাক্স নয়।
function FruitList() {
const fruits = ['apple', 'banana', 'mango'];
return (
<ul>
{fruits.map((fruit) => (
<li>{fruit}</li>
))}
</ul>
);
}.map(...)-এর চারপাশের কার্লি ব্রেস ঠিক JSX পাঠের অন্য যেকোনো এক্সপ্রেশন এম্বেড করার মতোই কাজ করে — এখানে .map() <li> এলিমেন্টের একটি অ্যারে রিটার্ন করে, আর React এলিমেন্টের একটি অ্যারে দিব্যি রেন্ডার করে।
উপরের কোড চালালে একটি কনসোল warning লগ হয়: "Each child in a list should have a unique key prop." re-render জুড়ে কোন আইটেম কোনটা তা সঠিকভাবে ট্র্যাক করতে React-এর প্রতিটি আইটেমে একটি স্থিতিশীল key দরকার — এটা ছাড়া, React শুধু অবস্থান দিয়ে অনুমান করতে পারে, যা একটি লিস্ট পুনর্বিন্যস্ত, ফিল্টার, বা মাঝখান থেকে একটি আইটেম সরানো হলে আসল বাগ তৈরি করে।
function FruitList() {
const fruits = ['apple', 'banana', 'mango'];
return (
<ul>
{fruits.map((fruit) => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);
}একটি key-কে সিবলিংদের মধ্যে ইউনিক, আর re-render জুড়ে স্থিতিশীল একটি স্ট্রিং বা সংখ্যা হতে হবে — একটি ডেটাবেস ID বা একটি slug আদর্শ:
function StudentList({ students }) {
return (
<ul>
{students.map((student) => (
<li key={student.id}>{student.name}</li>
))}
</ul>
);
}Index-কে key হিসেবে ব্যবহার একটি শর্টকাট নয়, একটি ফাঁদ
অ্যারে index-কে key হিসেবে ব্যবহার করা (fruits.map((fruit, i) => <li key={i}>)) কাজ করে, কিন্তু শুধু নিরাপদে যখন লিস্ট কখনো পুনর্বিন্যস্ত হয় না, ফিল্টার হয় না, বা শেষ ছাড়া অন্য কোথাও আইটেম insert/remove হয় না। Index key দিয়ে পুনর্বিন্যাস করলে পুনর্বিন্যাসের পর React স্টেটকে ভুল আইটেমের সাথে মিলিয়ে ফেলে — একটি আসল, সহজে-এড়িয়ে-যাওয়া বাগ। ডেটার একটি প্রকৃত, স্থিতিশীল ID থাকলে সেটাই ব্যবহার করুন।
key React নিজের জন্য মেটাডেটা, আপনার কম্পোনেন্ট পড়তে পারে এমন কিছু নয় — props.key সবসময় undefined। একটি কম্পোনেন্টের নিজের লজিকের জন্য একই মান প্রয়োজন হলে, একটি ভিন্ন নামে সেটা আবার পাস করুন।