Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Visa Datainsamlingar i React | Grunderna i React och Komponentbaserad UI
React Mastery

bookUtmaning: Visa Datainsamlingar i React

Uppgift: Visa en produktlista

Hantera data som hämtats från backend och säkerställ korrekt rendering i listformat.

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. Sätt 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 1. Kapitel 15

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

Awesome!

Completion rate improved to 2.17

bookUtmaning: Visa Datainsamlingar i React

Svep för att visa menyn

Uppgift: Visa en produktlista

Hantera data som hämtats från backend och säkerställ korrekt rendering i listformat.

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. Sätt 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 1. Kapitel 15
some-alt