Array zur Erstellung von Kinderkomponenten in React

Nehmen wir an, wir haben ein Array mit Produkten:

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

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

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.

In der App-Komponente ist das folgende Array gegeben:

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

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