Array voor het maken van kindcomponenten in React

Stel dat we een array met producten hebben:

jsxconst 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:

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

Задание 1

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.

Задание 2

In de App component is de volgende array gegeven:

jsxconst 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.