Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Tietokokoelmien Näyttäminen Reactissa | Reactin Perusteet ja Komponenttipohjainen Käyttöliittymä
React-mestaruus

bookHaaste: Tietokokoelmien Näyttäminen Reactissa

Tehtävä: Näytä tuotelista

Käsittele taustajärjestelmästä saatu data ja varmista sen asianmukainen esittäminen listamuodossa.

Tehtävä:

  • Hyödynnä map()-metodia tavaroiden taulukon renderöintiin.
  • Täytä seuraavat kohdat:
    1. h2-elementissä tulee olla tuotteen nimi (name-ominaisuus);
    2. p-elementissä tulee olla tuotteen kuvaus (description-ominaisuus);
    3. span-elementissä tulee olla merkkijono "Price:" ja tuotteen hinta (price-ominaisuus).
  1. Käytä map()-metodia käydäksesi läpi props.goods-taulukon.
  2. Aseta key-elementin <li>-prop arvoksi yksilöllinen arvo, kuten itemin id-ominaisuus.
  3. Jokaisen <li>-elementin sisällä käytä seuraavia elementtejä:
    • <h2>-elementti tuotteen nimen näyttämiseen. Hae nimi nykyisestä item:stä;
    • <p>-elementti tuotteen kuvauksen näyttämiseen. Hae kuvaus nykyisestä item:stä;
    • <span>-elementti, jossa on merkkijono "Price:" ja tuotteen hinta. Hae hinta nykyisestä item:stä.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 15

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.17

bookHaaste: Tietokokoelmien Näyttäminen Reactissa

Pyyhkäise näyttääksesi valikon

Tehtävä: Näytä tuotelista

Käsittele taustajärjestelmästä saatu data ja varmista sen asianmukainen esittäminen listamuodossa.

Tehtävä:

  • Hyödynnä map()-metodia tavaroiden taulukon renderöintiin.
  • Täytä seuraavat kohdat:
    1. h2-elementissä tulee olla tuotteen nimi (name-ominaisuus);
    2. p-elementissä tulee olla tuotteen kuvaus (description-ominaisuus);
    3. span-elementissä tulee olla merkkijono "Price:" ja tuotteen hinta (price-ominaisuus).
  1. Käytä map()-metodia käydäksesi läpi props.goods-taulukon.
  2. Aseta key-elementin <li>-prop arvoksi yksilöllinen arvo, kuten itemin id-ominaisuus.
  3. Jokaisen <li>-elementin sisällä käytä seuraavia elementtejä:
    • <h2>-elementti tuotteen nimen näyttämiseen. Hae nimi nykyisestä item:stä;
    • <p>-elementti tuotteen kuvauksen näyttämiseen. Hae kuvaus nykyisestä item:stä;
    • <span>-elementti, jossa on merkkijono "Price:" ja tuotteen hinta. Hae hinta nykyisestä item:stä.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 15
some-alt