Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Utfordring: Vise Datasamlinger i React | Grunnleggende om React og Komponentbasert Brukergrensesnitt
React Mastery

bookUtfordring: Vise Datasamlinger i React

Oppgave: Vis en produktliste

Håndter dataene mottatt fra backend og sørg for korrekt visning i listeformat.

Oppgaven er:

  • Bruk map()-metoden for å gjengi et array av 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-arrayet.
  2. Sørg for å sette key-prop'en til <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 1. Kapittel 15

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

Awesome!

Completion rate improved to 2.17

bookUtfordring: Vise Datasamlinger i React

Sveip for å vise menyen

Oppgave: Vis en produktliste

Håndter dataene mottatt fra backend og sørg for korrekt visning i listeformat.

Oppgaven er:

  • Bruk map()-metoden for å gjengi et array av 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-arrayet.
  2. Sørg for å sette key-prop'en til <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 1. Kapittel 15
some-alt