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 के रूप में फॉर्मेट करें।