Oppiskele Haaste: Tietokokoelmien Näyttäminen Reactissa | Reactin Perusteet ja Komponenttipohjainen Käyttöliittymä

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).

Käytä map()-metodia käydäksesi läpi props.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 mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain how to use the map() method in this context?

What should I do if some goods are missing a description or price?

Can you show an example of how the rendered list should look?

Completion rate improved to 2.17

Pyyhkäise näyttääksesi valikon

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).

Käytä map()-metodia käydäksesi läpi props.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