map के साथ डेटा के एक ऐरे को स्क्रीन पर एलिमेंट की एक लिस्ट में बदलें, और keys के साथ हर एलिमेंट की पहचान करें।
इस पाठ को Kodokon में खोलेंइंटरफ़ेस लिस्ट से भरे होते हैं: एक बातचीत में संदेश, एक स्टोर में उत्पाद, एक प्लेलिस्ट में ट्रैक... टैग को हाथ से कॉपी-पेस्ट करने के बजाय, आप डेटा के एक ऐरे से शुरू करते हैं और उसे map मेथड से रूपांतरित करते हैं। एक त्वरित याददाश्त: map किसी ऐरे के हर एलिमेंट पर एक फ़ंक्शन लागू करता है और परिणामों के साथ एक नया ऐरे लौटाता है।
const fruits = ["apple", "banana", "kiwi"];
const upperFruits = fruits.map(function (fruit) {
return fruit.toUpperCase();
});
console.log(upperFruits);React में, आप ठीक वही करते हैं, सिवाय इसके कि map को पास किया गया फ़ंक्शन स्ट्रिंग के बजाय JSX लौटाता है। React जानता है कि JSX एलिमेंट के एक ऐरे को कैसे प्रदर्शित करना है: यह उन्हें एक के बाद एक रेंडर करता है। एकमात्र आवश्यकता यह है कि हर एलिमेंट को key नामक एक विशेष prop दिया जाए।
function FruitList() {
const fruits = ["apple", "banana", "kiwi"];
return (
<ul>
{fruits.map((fruit) => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);
}key किसलिए है? यह एक अद्वितीय लेबल है जो React को हर एलिमेंट को पहचानने देता है जब लिस्ट बदलती है (जोड़ना, हटाना, पुनः क्रमबद्ध करना), जैसे किसी क्लोकरूम में नंबर वाले टिकट: बिना नंबर के, सही कोट लौटाने का कोई तरीका नहीं है। keys की बदौलत, React केवल उसी को अपडेट करता है जो वास्तव में बदल गया है। व्यवहार में, सबसे अच्छी key आपके डेटा से आने वाला एक अद्वितीय, स्थिर पहचानकर्ता होती है, जैसे कि एक id फ़ील्ड।
const tasks = [
{ id: 1, label: "Buy groceries" },
{ id: 2, label: "Water the plants" },
];
function TaskList() {
return (
<ul>
{tasks.map((task) => (
<li key={task.id}>{task.label}</li>
))}
</ul>
);
}key prop किसलिए है?