Een array van objecten weergeven als HTML-tabel in React

Stel dat we opnieuw onze array met producten hebben:

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

Laten we de elementen van onze array weergeven in de vorm van een HTML-tabel:

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

Laten we kolomkoppen toevoegen aan onze tabel:

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>naam</td>
				<td>kosten</td>
			</tr>
		</thead>
		<tbody>
			{rows}
		</tbody>
	</table>;
}

In de component App is de volgende array gegeven:

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

Geef de elementen van deze array weer als een tabel table zodanig dat elk veld van het object in zijn eigen tag td komt. Maak koppen voor de kolommen van je tabel.