Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Anzeigen von Datensammlungen | Wiederverwendbare Komponenten und Datenfluss
Einführung in React

bookHerausforderung: Anzeigen von Datensammlungen

Aufgabe: Produktliste anzeigen

Verarbeitung der vom Backend erhaltenen Daten und Sicherstellung der korrekten Darstellung in Listenform.

Die Aufgabe ist:

  • Verwendung der Methode map(), um ein Array von Waren darzustellen.
  • Ausfüllen der erforderlichen Felder:
    1. h2 muss den Namen der Ware enthalten (name-Eigenschaft);
    2. p muss die Beschreibung der Ware enthalten (description-Eigenschaft);
    3. span muss den Text "Price:" und den Preis der Ware enthalten (price-Eigenschaft).
  1. Die Methode map() verwenden, um über das Array props.goods zu iterieren.
  2. Sicherstellen, dass das key-Attribut des <li>-Elements auf einen eindeutigen Wert gesetzt wird, beispielsweise die id-Eigenschaft des Elements.
  3. Innerhalb jedes <li>-Elements die folgenden Elemente verwenden:
    • Ein <h2>-Element zur Anzeige des Namens der Ware. Zugriff auf den Namen über das aktuelle item;
    • Ein <p>-Element zur Anzeige der Beschreibung der Ware. Zugriff auf die Beschreibung über das aktuelle item;
    • Ein <span>-Element zur Anzeige des Textes "Price:" gefolgt vom Preis der Ware. Zugriff auf den Preis über das aktuelle item.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

bookHerausforderung: Anzeigen von Datensammlungen

Swipe um das Menü anzuzeigen

Aufgabe: Produktliste anzeigen

Verarbeitung der vom Backend erhaltenen Daten und Sicherstellung der korrekten Darstellung in Listenform.

Die Aufgabe ist:

  • Verwendung der Methode map(), um ein Array von Waren darzustellen.
  • Ausfüllen der erforderlichen Felder:
    1. h2 muss den Namen der Ware enthalten (name-Eigenschaft);
    2. p muss die Beschreibung der Ware enthalten (description-Eigenschaft);
    3. span muss den Text "Price:" und den Preis der Ware enthalten (price-Eigenschaft).
  1. Die Methode map() verwenden, um über das Array props.goods zu iterieren.
  2. Sicherstellen, dass das key-Attribut des <li>-Elements auf einen eindeutigen Wert gesetzt wird, beispielsweise die id-Eigenschaft des Elements.
  3. Innerhalb jedes <li>-Elements die folgenden Elemente verwenden:
    • Ein <h2>-Element zur Anzeige des Namens der Ware. Zugriff auf den Namen über das aktuelle item;
    • Ein <p>-Element zur Anzeige der Beschreibung der Ware. Zugriff auf die Beschreibung über das aktuelle item;
    • Ein <span>-Element zur Anzeige des Textes "Price:" gefolgt vom Preis der Ware. Zugriff auf den Preis über das aktuelle item.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7
some-alt