Ausgabe eines Arrays von Objekten als HTML-Tabelle in React

Nehmen wir an, wir haben wieder unser Array mit Produkten:

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

Lassen Sie uns die Elemente unseres Arrays als HTML-Tabelle ausgeben:

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

Fügen wir unserer Tabelle Spaltenüberschriften hinzu:

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

In der Komponente App ist das folgende Array gegeben:

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

Geben Sie die Elemente dieses Arrays in Form einer Tabelle table aus, sodass jedes Feld des Objekts in sein eigenes td Tag kommt. Erstellen Sie Überschriften für die Spalten Ihrer Tabelle.