आईडी के माध्यम से React में अद्वितीय कुंजियाँ

ऊपर दिए गए कोड में key एट्रिब्यूट में हमने सरणी में तत्व की क्रम संख्या जोड़ी थी। वास्तव में, ऐसी प्रथा अच्छी नहीं है और इसका उपयोग केवल अंतिम उपाय के रूप में करना चाहिए।

बात यह है कि सरणी को क्रमबद्ध करने पर तत्वों की कुंजियाँ बदल जाएंगी और React सरणी के तत्वों और संबंधित टैगों के बीच संबंध को सही ढंग से ट्रैक नहीं कर पाएगा।

एक बेहतर अभ्यास यह होगा कि प्रत्येक उत्पाद में एक अद्वितीय पहचानकर्ता जोड़ा जाए, जिसका उपयोग कुंजी के रूप में किया जाएगा।

आइए हम अपनी सरणी में प्रत्येक उत्पाद में उसकी संख्या के साथ id प्रॉपर्टी जोड़ें:

jsxconst prods = [
  {id: 1, name: 'product1', cost: 100},
  {id: 2, name: 'product2', cost: 200},
  {id: 3, name: 'product3', cost: 300},
];

अब कुंजी के रूप में इस id का उपयोग करें:

jsxfunction 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>;
}