Mostrar un array de objetos como una tabla HTML en React

Supongamos que tenemos nuevamente nuestro array de productos:

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

Mostremos los elementos de nuestro array como una tabla 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>;
}

Agreguemos encabezados de columna a nuestra tabla:

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

En el componente App se da el siguiente array:

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

Muestra los elementos de este array en forma de tabla table de modo que cada campo del objeto caiga en su propia etiqueta td. Haz los encabezados de las columnas de tu tabla.