Hiển thị mảng các đối tượng dưới dạng bảng HTML trong React

Giả sử chúng ta lại có mảng sản phẩm của chúng ta:

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

Hãy hiển thị các phần tử của mảng chúng ta dưới dạng bảng HTML:

function App() {
	const rows = prods.map(function(item) {
		return <tr key={item.id}>
			<td>{item.name}</td>
			<td>{item.cost}</td>
		</tr>;
	});
	
	return <table>
		<tbody>
			{rows}
		</tbody>
	</table>;
}

Hãy thêm tiêu đề cột cho bảng của chúng ta:

function App() {
	const rows = prods.map(function(item) {
		return <tr key={item.id}>
			<td>{item.name}</td>
			<td>{item.cost}</td>
		</tr>;
	});
	
	return <table>
		<thead>
			<tr>
				<td>tên</td>
				<td>giá</td>
			</tr>
		</thead>
		<tbody>
			{rows}
		</tbody>
	</table>;
}

Trong component App cho mảng sau:

const users = [
	{id: 1, name: 'user1', surn: 'surn1', age: 30},
	{id: 2, name: 'user2', surn: 'surn2', age: 31},
	{id: 3, name: 'user3', surn: 'surn3', age: 32},
];

Hiển thị các phần tử của mảng này dưới dạng bảng table sao cho mỗi trường của đối tượng nằm trong thẻ td của riêng nó. Hãy tạo tiêu đề cho các cột của bảng của bạn.