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

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

const 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 वेरिएबल में स्टोर है और इसका मतलब है कि सही की गई लाइन इस तरह दिखेगी:

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

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

function 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 एट्रिब्यूट को प्रत्येक टैग के लिए यूनिक वैल्यू के साथ जोड़ें और समस्या गायब हो जाएगी।

key की यूनिक होने की आवश्यकता केवल इसी लूप के अंदर होती है, दूसरे लूप में key के वैल्यू दूसरे लूप के वैल्यू से मेल खा सकते हैं।

वर्णित के अनुसार अपने पिछले टास्क के सॉल्यूशन को मॉडिफाई करें।