রিয়াক্টে আমাদেরকে প্রায় সময়ই লিস্ট অফ ডাটা বা ডাটা Array থেকে ডাটা রেন্ডার করার প্রয়োজন হয়। সেক্ষেত্রে আমারা map, filter ব্যাবহার করে তা দেখাতে পারি।

উদাহরনঃ

const users = ["Mr x", "Mr y", "Mr z"];
 
export function ListOfUser() {
    const user = users.map((person) => <li>{person}</li>);
    return <ul>{user}</ul>;
}

key এর ব্যাবহারঃ

লিস্ট অফ আইটেম map করে রেন্ডার করার সময় প্রতিটা লিস্ট এলিমেন্টে অবশ্যই key ব্যাবহার করতে হবে।

const users = [
    {
        id: 1,
        name: "Mr X",
    },
    {
        id: 2,
        name: "Mr XX",
    },
];
 
export function ListOfUser() {
    const user = users.map((person) => <li key={person.id}>{person.name}</li>);
    return <ul>{user}</ul>;
}

key কিভাবে পেতে পারি ?

বিভিন্ন ডাটা থেকে বিভিন্ন ভাবে key পেতে পারি, যেমনঃ

• ডাটাবেস থেকে প্রাপ্ত ডাটাঃ যেসব ডাটা আমরা ডাটাবেস থেকে পাই সেগুলোর সাথে আমারা অটোমেটিক Id পেয়ে যাই, এই Id আমরা key হিসেবে ব্যাবহার করতে পারি।

• লোকাল ডাটার ক্ষেত্রেঃ যেসব ডাটা লোকালি অটোমেটিক জেনারেটেড হয় সেসব ডাটার ক্ষেত্রে আমারা crypto.randomUUID() অথবা uuid ব্যাবহার করে id/key জেনারেট করে সেভ করতে পারি।

রুলস অফ key

• key অবশ্যই ইউনিক হতে হবে। একই লিস্টের বিভিন্ন এলিমেন্টে একই key ব্যাবহার করা যাবেনা।

• key পরিবর্তন করা যাবেনা বা রেন্ডারিং এর সময়ে key জেনারেট করে ব্যবাহার করা যাবেনা।

• Arrayর ইনডেক্সকে কখনো কি হিসেবে ব্যাবহার করা যাবেনা।

রিয়াক্টে কেন key ব্যাবহার করা লাগে?

রিয়াক্ট তার DOM TREEতে প্রতিটা আইটেমকে ইউনিকভাবে আইডেন্টিফাই করার জন্য keyর প্রয়োজন হয়। যাতে কখনও লিস্ট থেকে কোন আইটেম ডিলিট হয়ে গেলে,বা কখনো sort করা লাগলে যেন রিয়াক্ট সহজে বুঝতে পারে যে কোন আইটেমে পরিবর্তন হয়েছে।