रिएक्ट में टैग ऐरे में यूनिक कीज़

पिछले उदाहरण में हम अपने पैराग्राफ को लूप में इस तरह बना रहे थे:

jsxconst res = arr.map(function(item) {
  return <p>{item}</p>;
});

यह काम करेगा, हालांकि, अगर कंसोल में देखें - तो हमें एक त्रुटि दिखाई देगी: Warning: Each child in an array or iterator should have a unique "key" prop. इस मामले में रिएक्ट की आवश्यकता है कि लूप से प्रत्येक टैग को हम एक यूनिक नंबर दें, ताकि रिएक्ट को भविष्य में इन टैग के साथ काम करना आसान हो।

यह नंबर key एट्रिब्यूट की मदद से जोड़ा जाता है। इस मामले में नंबर के रूप में हम ऐरे में एलिमेंट का इंडेक्स ले सकते हैं। हमारे मामले में यह नंबर index वेरिएबल में स्टोर है और इसका मतलब है कि सही की गई लाइन इस तरह दिखेगी:

jsxconst res = arr.map(function(item, index) {
  return <p key={index}>{item}</p>;
});

चलिए रन करते हैं - कंसोल से त्रुटि गायब हो जाएगी:

jsxfunction App() {
  const arr = [1, 2, 3, 4, 5];
  
  const res = arr.map(function(item, index) {
    return <p key={index}>{item}</p>;
  });
  
  return <div>
    {res}
  </div>;
}

एक बार फिर: यह key एट्रिब्यूट का रिएक्ट के लिए सर्विस वैल्यू है, आप इस प्वाइंट को अगले पाठों में बेहतर समझेंगे। अभी के लिए बस जान लें: अगर आपको ऐसी कोई त्रुटि दिखाई देती है - key एट्रिब्यूट को प्रत्येक टैग के लिए यूनिक वैल्यू के साथ जोड़ें और समस्या गायब हो जाएगी।