Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Utfordring: Vis Datasamlinger | Gjenbrukbare Komponenter og Dataflyt
Introduksjon til React

bookUtfordring: Vis Datasamlinger

Oppgave: Vis en produktliste

Behandle dataene hentet fra backend og sørg for korrekt visning i listeformat.

Oppgaven er:

  • Bruk map()-metoden for å gjengi en array med varer.
  • Sørg for å fylle ut de nødvendige feltene:
    1. h2 må inneholde varens navn (name-egenskap);
    2. p må inneholde varens beskrivelse (description-egenskap);
    3. span må inneholde teksten "Price:" og varens pris (price-egenskap).
  1. Bruk map()-metoden for å iterere over props.goods-arrayen.
  2. Sørg for å sette key-prop'en på <li>-elementet til en unik verdi, for eksempel id-egenskapen til varen.
  3. Inne i hvert <li>-element, bruk følgende elementer:
    • Et <h2>-element for å vise varens navn. Hent navnet fra gjeldende item;
    • Et <p>-element for å vise varens beskrivelse. Hent beskrivelsen fra gjeldende item;
    • Et <span>-element for å vise teksten "Price:" etterfulgt av varens pris. Hent prisen fra gjeldende item.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 7

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

bookUtfordring: Vis Datasamlinger

Sveip for å vise menyen

Oppgave: Vis en produktliste

Behandle dataene hentet fra backend og sørg for korrekt visning i listeformat.

Oppgaven er:

  • Bruk map()-metoden for å gjengi en array med varer.
  • Sørg for å fylle ut de nødvendige feltene:
    1. h2 må inneholde varens navn (name-egenskap);
    2. p må inneholde varens beskrivelse (description-egenskap);
    3. span må inneholde teksten "Price:" og varens pris (price-egenskap).
  1. Bruk map()-metoden for å iterere over props.goods-arrayen.
  2. Sørg for å sette key-prop'en på <li>-elementet til en unik verdi, for eksempel id-egenskapen til varen.
  3. Inne i hvert <li>-element, bruk følgende elementer:
    • Et <h2>-element for å vise varens navn. Hent navnet fra gjeldende item;
    • Et <p>-element for å vise varens beskrivelse. Hent beskrivelsen fra gjeldende item;
    • Et <span>-element for å vise teksten "Price:" etterfulgt av varens pris. Hent prisen fra gjeldende item.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 7
some-alt