Array untuk Mencipta Komponen Anak dalam React

Katakan kita mempunyai array dengan produk:

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

Mari paparkan tiga komponen Product, dengan menghantar data dari array kami ke props. Buat sementara waktu jangan gunakan gelung, sebaliknya hanya akses elemen array dan objek:

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>;
}

Buat komponen User yang memaparkan data pengguna. Biarkan data ini menjadi nama, nama keluarga, umur. Formatkan data pengguna sebagai tag tr yang mengandungi tiga tag td.

Dalam komponen App, array berikut diberikan:

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},
];

Dengan menggunakan array ini, paparkan tiga pengguna. Formatkan paparan mereka dalam bentuk jadual table.