Array untuk Membuat Komponen Anak di React

Misalkan kita memiliki array produk:

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

Mari tampilkan tiga komponen Product, dengan mengirimkan data dari array kita ke props. Untuk sementara, jangan gunakan perulangan, tetapi langsung 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>;
}

Buatlah komponen User yang menampilkan data pengguna ke layar. Data tersebut adalah nama depan, nama belakang, dan usia. Format data pengguna dalam tag tr yang berisi tiga tag td.

Dalam komponen App diberikan array berikut:

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, tampilkan tiga pengguna. Format tampilannya dalam bentuk tabel table.