React-এ চাইল্ড কম্পোনেন্ট তৈরি করতে অ্যারে

ধরুন আমাদের কাছে পণ্যের একটি অ্যারে আছে:

const prods = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

আসুন আমাদের অ্যারে থেকে ডেটা প্রপ্স হিসেবে পাঠিয়ে তিনটি Product কম্পোনেন্ট প্রদর্শন করি। আমরা এখনও লুপ ব্যবহার করব না, বরং সরাসরি অ্যারে এবং অবজেক্টের এলিমেন্টে অ্যাক্সেস করব:

function App() {
	return <div>
		<Product name={prods[0].name} cost={prods[0].cost} />
		<Product name={prods[1].name} cost={prods[1].cost} />
		<Product name={prods[2].name} cost={prods[2].cost} />
	</div>;
}

একটি User কম্পোনেন্ট তৈরি করুন যা ব্যবহারকারীর ডেটা প্রদর্শন করে। এই ডেটাগুলি হতে পারে নাম, উপাধি, বয়স। ব্যবহারকারীর ডেটা tr ট্যাগ হিসাবে ফর্ম্যাট করুন, যাতে তিনটি td ট্যাগ থাকে।

App কম্পোনেন্টে নিম্নলিখিত অ্যারে দেওয়া আছে:

const users = [
	{id: id(), name: 'user1', surn: 'surn1', age: 30},
	{id: id(), name: 'user2', surn: 'surn2', age: 31},
	{id: id(), name: 'user3', surn: 'surn3', age: 32},
];

এই অ্যারে ব্যবহার করে তিনজন ব্যবহারকারী প্রদর্শন করুন। এগুলি একটি table ট্যাগের মধ্যে টেবিল আকারে ফর্ম্যাট করুন।