Array zur Erstellung von Kinderkomponenten in React

Nehmen wir an, wir haben ein Array mit Produkten:

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

Lassen Sie uns drei Product-Komponenten anzeigen, indem wir ihnen die Daten aus unserem Array als Props übergeben. Verwenden wir zunächst keine Schleife, sondern greifen wir einfach auf die Elemente des Arrays und des Objekts zu:

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

Erstellen Sie eine User-Komponente, die die Benutzerdaten anzeigt. Diese Daten sollen Vorname, Nachname und Alter sein. Formatieren Sie die Benutzerdaten als tr-Tag, das drei td-Tags enthält.

Задание 2

In der App-Komponente ist das folgende Array gegeben:

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

Geben Sie mit Hilfe dieses Arrays drei Benutzer aus. Formatieren Sie ihre Ausgabe als table-Tabelle.