React-এ ট্যাগ অ্যারেতে ইউনিক কী

পূর্ববর্তী উদাহরণে, আমরা আমাদের প্যারাগ্রাফগুলি একটি লুপে তৈরি করেছি, এভাবে:

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

এটি কাজ করবে, তবে, যদি কনসোলে দেখি - আমরা একটি ত্রুটি দেখতে পাব: Warning: Each child in an array or iterator should have a unique "key" prop. এই ক্ষেত্রে React দাবি করে যে লুপ থেকে প্রতিটি ট্যাগকে আমরা একটি ইউনিক নম্বর দিই, যাতে React-এর পক্ষে ভবিষ্যতে এই ট্যাগগুলির সাথে কাজ করা সহজ হয়।

এই নম্বরটি 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 অ্যাট্রিবিউটটির React-এর জন্য সার্ভিস উদ্দেশ্য রয়েছে, পরবর্তী পাঠগুলিতে আপনি এই পয়েটিটি আরও গভীরভাবে বুঝতে পারবেন। এখন শুধু জানুন: আপনি যদি এমন ত্রুটি দেখেন - যোগ করুন key অ্যাট্রিবিউট প্রতিটি ট্যাগের জন্য একটি ইউনিক মান সহ এবং সমস্যাটি অদৃশ্য হয়ে যাবে।

key কীটির শুধুমাত্র এই লুপের ভিতরে ইউনিক হতে হবে, অন্য লুপে key এর মানগুলি অন্য লুপের মানগুলির সাথে মিলতে পারে।

বর্ণিত অনুসারে আপনার পূর্ববর্তী কাজের সমাধানটি পরিবর্তন করুন।