Utmaning: Visa Datainsamlingar i React
Uppgift: Visa en produktlista
Hantera data som hämtats från backend och säkerställ korrekt rendering i listformat.
Uppgiften är:
- Använd metoden
map()för att rendera en array av varor. - Fyll i de nödvändiga delarna:
h2ska innehålla varans namn (name-egenskapen);pska innehålla varans beskrivning (description-egenskapen);spanska innehålla strängen "Price:" och varans pris (price-egenskapen).
- Använd metoden
map()för att iterera överprops.goods-arrayen. - Sätt
key-prop på<li>-elementet till ett unikt värde, till exempel id-egenskapen för objektet. - Inuti varje
<li>-element, använd följande element:- Ett
<h2>-element för att visa varans namn. Hämta namnet från aktuelltitem; - Ett
<p>-element för att visa varans beskrivning. Hämta beskrivningen från aktuelltitem; - Ett
<span>-element för att visa strängen "Price:" följt av varans pris. Hämta priset från aktuelltitem.
- Ett
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 15
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.17
Utmaning: Visa Datainsamlingar i React
Svep för att visa menyn
Uppgift: Visa en produktlista
Hantera data som hämtats från backend och säkerställ korrekt rendering i listformat.
Uppgiften är:
- Använd metoden
map()för att rendera en array av varor. - Fyll i de nödvändiga delarna:
h2ska innehålla varans namn (name-egenskapen);pska innehålla varans beskrivning (description-egenskapen);spanska innehålla strängen "Price:" och varans pris (price-egenskapen).
- Använd metoden
map()för att iterera överprops.goods-arrayen. - Sätt
key-prop på<li>-elementet till ett unikt värde, till exempel id-egenskapen för objektet. - Inuti varje
<li>-element, använd följande element:- Ett
<h2>-element för att visa varans namn. Hämta namnet från aktuelltitem; - Ett
<p>-element för att visa varans beskrivning. Hämta beskrivningen från aktuelltitem; - Ett
<span>-element för att visa strängen "Price:" följt av varans pris. Hämta priset från aktuelltitem.
- Ett
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 15