Tableau pour créer des composants enfants dans React

Supposons que nous ayons un tableau de produits :

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

Affichons trois composants Product à l'écran, en leur passant les données de notre tableau via les props. Pour l'instant, n'utilisons pas de boucle, mais accédons simplement aux éléments du tableau et de l'objet :

function App() {
	return <div>
		<Product name={prods[0].name} cost={prods[0].cost} />
		<Product name={prods[1].name} cost={prods[1].cost} />
		<Product name={prods[2].name} cost={prods[2].cost} />
	</div>;
}

Créez un composant User affichant les données de l'utilisateur à l'écran. Laissez ces données être le prénom, le nom, l'âge. Formatez les données de l'utilisateur dans une balise tr contenant trois balises td.

Le tableau suivant est donné dans le composant App :

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

À l'aide de ce tableau, affichez trois utilisateurs. Formatez leur affichage sous forme de tableau table.