Array voor het maken van kindcomponenten in React

Stel dat we een array met producten hebben:

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

Laten we drie Product componenten weergeven op het scherm, en hun de gegevens uit onze array doorgeven via props. Laten we nog geen lus gebruiken, maar simpelweg toegang krijgen tot de elementen van de array en het object:

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

Maak een User component dat gebruikersgegevens op het scherm weergeeft. Laat deze gegevens voornaam, achternaam, leeftijd zijn. Formatteer de gebruikersgegevens als een tr tag, die drie td tags bevat.

In de App component is de volgende array gegeven:

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

Gebruik deze array om drie gebruikers weer te geven. Geef hun weergave weer als een table tabel.