7. React Lists
📘 কনসেপ্ট (থিওরি)
রিঅ্যাক্টে, আপনি কোনো ধরনের লুপ দিয়ে তালিকা (lists) রেন্ডার করবেন।
জাভাস্ক্রিপ্টের
map() অ্যারে মেথডটি সাধারণত পছন্দের মেথড।
**কী (Keys)**
কীগুলো রিঅ্যাক্টকে এলিমেন্টগুলোর ট্র্যাক রাখতে দেয়। এইভাবে, যদি কোনো আইটেম আপডেট করা হয় বা সরিয়ে দেওয়া হয়, তবে পুরো তালিকার পরিবর্তে শুধুমাত্র সেই আইটেমটি পুনরায় রেন্ডার করা হবে।
কীগুলোকে প্রতিটি ভাইবোনের (sibling) জন্য অনন্য (unique) হতে হবে। তবে বিশ্বব্যাপী এগুলো ডুপ্লিকেট করা যেতে পারে।💡 উদাহরণ
তালিকা রেন্ডার করা:
function Car(props) {
return I am a { props.brand } ;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
Who lives in my garage?
-
{cars.map((car) =>
🎯 আপনার কাজ (প্র্যাকটিস)
একটি কম্পোনেন্ট
FruitList তৈরি করুন যা স্ট্রিংয়ের একটি অ্যারে props.fruits নেয়। props.fruits এর ওপর ম্যাপ করে {fruit}
main.react
Loading...
OUTPUT
Run your code to see the output here...