Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Vis Datasamlinger | Genanvendelige Komponenter og Dataflow
Introduktion til React

bookUdfordring: Vis Datasamlinger

Opgave: Vis en produktliste

Håndter data modtaget fra backend og sørg for korrekt visning i listeformat.

Opgaven er:

  • Anvend map()-metoden til at gengive et array af varer.
  • Sørg for at udfylde de nødvendige felter:
    1. h2 skal indeholde varens navn (name-egenskaben);
    2. p skal indeholde varens beskrivelse (description-egenskaben);
    3. span skal indeholde teksten "Price:" og varens pris (price-egenskaben).
  1. Brug map()-metoden til at iterere over props.goods-arrayet.
  2. Sørg for at sætte key-proppen på <li>-elementet til en unik værdi, såsom id-egenskaben for varen.
  3. Inde i hvert <li>-element skal følgende elementer bruges:
    • Et <h2>-element til at vise varens navn. Tilgå navnet fra det aktuelle item;
    • Et <p>-element til at vise varens beskrivelse. Tilgå beskrivelsen fra det aktuelle item;
    • Et <span>-element til at vise teksten "Price:" efterfulgt af varens pris. Tilgå prisen fra det aktuelle item.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 7

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

bookUdfordring: Vis Datasamlinger

Stryg for at vise menuen

Opgave: Vis en produktliste

Håndter data modtaget fra backend og sørg for korrekt visning i listeformat.

Opgaven er:

  • Anvend map()-metoden til at gengive et array af varer.
  • Sørg for at udfylde de nødvendige felter:
    1. h2 skal indeholde varens navn (name-egenskaben);
    2. p skal indeholde varens beskrivelse (description-egenskaben);
    3. span skal indeholde teksten "Price:" og varens pris (price-egenskaben).
  1. Brug map()-metoden til at iterere over props.goods-arrayet.
  2. Sørg for at sætte key-proppen på <li>-elementet til en unik værdi, såsom id-egenskaben for varen.
  3. Inde i hvert <li>-element skal følgende elementer bruges:
    • Et <h2>-element til at vise varens navn. Tilgå navnet fra det aktuelle item;
    • Et <p>-element til at vise varens beskrivelse. Tilgå beskrivelsen fra det aktuelle item;
    • Et <span>-element til at vise teksten "Price:" efterfulgt af varens pris. Tilgå prisen fra det aktuelle item.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 7
some-alt