आईडी के माध्यम से React में अद्वितीय कुंजियाँ
ऊपर दिए गए कोड में key एट्रिब्यूट में
हमने सरणी में तत्व की क्रम संख्या जोड़ी थी।
वास्तव में, ऐसी प्रथा अच्छी नहीं है और इसका
उपयोग केवल अंतिम उपाय के रूप में करना चाहिए।
बात यह है कि सरणी को क्रमबद्ध करने पर तत्वों की कुंजियाँ बदल जाएंगी और React सरणी के तत्वों और संबंधित टैगों के बीच संबंध को सही ढंग से ट्रैक नहीं कर पाएगा।
एक बेहतर अभ्यास यह होगा कि प्रत्येक उत्पाद में एक अद्वितीय पहचानकर्ता जोड़ा जाए, जिसका उपयोग कुंजी के रूप में किया जाएगा।
आइए हम अपनी सरणी में प्रत्येक उत्पाद में
उसकी संख्या के साथ id प्रॉपर्टी जोड़ें:
const prods = [
{id: 1, name: 'product1', cost: 100},
{id: 2, name: 'product2', cost: 200},
{id: 3, name: 'product3', cost: 300},
];
अब कुंजी के रूप में इस id का उपयोग करें:
function App() {
const res = prods.map(function(item) {
return <p key={item.id}>
<span>{item.name}</span>:
<span>{item.cost}</span>
</p>;
});
return <div>
{res}
</div>;
}
पिछले कार्य को संशोधित करें, सरणी में
id जोड़कर और key एट्रिब्यूट के
मानों के रूप में उनका उपयोग करके।
