Mảng để tạo các thành phần con trong React

Giả sử chúng ta có một mảng các sản phẩm:

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

Hãy hiển thị ba thành phần Product lên màn hình, truyền cho chúng dữ liệu từ mảng của chúng ta trong props. Tạm thời đừng sử dụng vòng lặp, mà chỉ đơn giản thực hiện truy cập các phần tử của mảng và đối tượng:

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

Tạo thành phần User, hiển thị dữ liệu người dùng lên màn hình. Hãy để dữ liệu này là tên, họ, tuổi. Định dạng dữ liệu người dùng dưới dạng thẻ tr, chứa ba thẻ td.

Trong thành phần App có mảng sau:

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

Sử dụng mảng này, hãy hiển thị ba người dùng. Định dạng việc hiển thị của họ dưới dạng bảng table.