Haaste: 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:
h2-elementissä tulee olla tuotteen nimi (name-ominaisuus);p-elementissä tulee olla tuotteen kuvaus (description-ominaisuus);span-elementissä tulee olla merkkijono "Price:" ja tuotteen hinta (price-ominaisuus).
- Käytä
map()-metodia käydäksesi läpiprops.goods-taulukon. - Aseta
key-elementin<li>-prop arvoksi yksilöllinen arvo, kuten itemin id-ominaisuus. - 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ää?
Kiitos palautteestasi!
Osio 1. Luku 15
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.17
Haaste: 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:
h2-elementissä tulee olla tuotteen nimi (name-ominaisuus);p-elementissä tulee olla tuotteen kuvaus (description-ominaisuus);span-elementissä tulee olla merkkijono "Price:" ja tuotteen hinta (price-ominaisuus).
- Käytä
map()-metodia käydäksesi läpiprops.goods-taulukon. - Aseta
key-elementin<li>-prop arvoksi yksilöllinen arvo, kuten itemin id-ominaisuus. - 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ää?
Kiitos palautteestasi!
Osio 1. Luku 15