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ä
Johdanto Reactiin

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

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