Herausforderung: Rendern Einer Datensammlung

Aufgabe: Zeige eine Produktliste

Lassen Sie uns die vom Backend erhaltenen Daten verarbeiten und sicherstellen, dass sie ordnungsgemäß in Listenform gerendert werden.

Die Aufgabe ist:

• Verwenden Sie die map()-Methode, um ein Array von Waren zu rendern.
• Stellen Sie sicher, dass die notwendigen Lücken gefüllt werden:
  1. h2 muss den Namen der Ware enthalten (name-Eigenschaft);
  2. p muss die Beschreibung der Ware enthalten (description-Eigenschaft);
  3. span muss den String "Preis:" und den Preis der Ware enthalten (price-Eigenschaft).

1. Verwenden Sie die Methode map(), um über das Array props.goods zu iterieren.
2. Stellen Sie sicher, dass Sie die key-Eigenschaft des <li>-Elements auf einen eindeutigen Wert setzen, wie z.B. die id-Eigenschaft des Elements.
3. Verwenden Sie innerhalb jedes <li>-Elements die folgenden Elemente:
   • Ein <h2>-Element, um den Namen des Produkts anzuzeigen. Greifen Sie auf den Namen des aktuellen item zu;
   • Ein <p>-Element, um die Beschreibung des Produkts anzuzeigen. Greifen Sie auf die Beschreibung des aktuellen item zu;
   • Ein <span>-Element, um die Zeichenfolge "Preis:" gefolgt vom Preis des Produkts anzuzeigen. Greifen Sie auf den Preis des aktuellen item zu.