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 අංගයක් සාදන්න. මෙම දත්ත නම, අන්වර්ථ නාමය, වයස විය යුතුය. පරිශීලක දත්ත ටැග් තුනක් td අඩංගු tr ටැගයක් ලෙස ආකෘතිගත කරන්න.

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 වගුවක් ලෙස ආකෘතිගත කරන්න.