Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Visa Datainsamlingar | Återanvändbara Komponenter och Dataflöde
Introduktion till React

bookUtmaning: Visa Datainsamlingar

Uppgift: Visa en produktlista

Hantera data som erhålls från backend och säkerställ korrekt rendering i en listvy.

Uppgiften är:

  • Använd metoden map() för att rendera en array av varor.
  • Fyll i de nödvändiga delarna:
    1. h2 ska innehålla varans namn (name-egenskapen);
    2. p ska innehålla varans beskrivning (description-egenskapen);
    3. span ska innehålla strängen "Price:" och varans pris (price-egenskapen).
  1. Använd metoden map() för att iterera över props.goods-arrayen.
  2. Ange key-prop på <li>-elementet till ett unikt värde, till exempel id-egenskapen för objektet.
  3. Inuti varje <li>-element, använd följande element:
    • Ett <h2>-element för att visa varans namn. Hämta namnet från aktuellt item;
    • Ett <p>-element för att visa varans beskrivning. Hämta beskrivningen från aktuellt item;
    • Ett <span>-element för att visa strängen "Price:" följt av varans pris. Hämta priset från aktuellt item.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 7

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

bookUtmaning: Visa Datainsamlingar

Svep för att visa menyn

Uppgift: Visa en produktlista

Hantera data som erhålls från backend och säkerställ korrekt rendering i en listvy.

Uppgiften är:

  • Använd metoden map() för att rendera en array av varor.
  • Fyll i de nödvändiga delarna:
    1. h2 ska innehålla varans namn (name-egenskapen);
    2. p ska innehålla varans beskrivning (description-egenskapen);
    3. span ska innehålla strängen "Price:" och varans pris (price-egenskapen).
  1. Använd metoden map() för att iterera över props.goods-arrayen.
  2. Ange key-prop på <li>-elementet till ett unikt värde, till exempel id-egenskapen för objektet.
  3. Inuti varje <li>-element, använd följande element:
    • Ett <h2>-element för att visa varans namn. Hämta namnet från aktuellt item;
    • Ett <p>-element för att visa varans beskrivning. Hämta beskrivningen från aktuellt item;
    • Ett <span>-element för att visa strängen "Price:" följt av varans pris. Hämta priset från aktuellt item.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 7
some-alt