Приказ на објекти од низа во форма на HTML табела во React

Да претпоставиме дека повторно го имаме нашиот низа со производи:

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

Ајде да ги прикажеме елементите од нашиот низа во форма на 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>;
}

Да додадеме наслови на колоните во нашата табела:

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>име</td>
				<td>цена</td>
			</tr>
		</thead>
		<tbody>
			{rows}
		</tbody>
	</table>;
}

Во компонентата App е дадена следнава низа:

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

Прикажете ги елементите од оваа низа во форма на табела table на таков начин што секое поле од објектот ќе се наоѓа во својот тег td. Направете наслови за колоните во вашата табела.