Challenge: Display Data Collections in React
Task: Show a Product List
Let's handle the data obtained from the backend and ensure its proper rendering in a list format.
The task is:
- Utilize the
map()
method to render an array of goods. - Ensure to fill the necessary gaps:
h2
must contain the good's name (name
property);p
must contain the good's description (description
property);span
must contain the string "Price:" and the good's price (price
property).
- Use the
map()
method to map over theprops.goods
array. - Ensure to set the
key
prop of the<li>
element to a unique value, such as the id property of the item. - Inside each
<li>
element, use the following elements:- An
<h2>
element to display the good's name. Access the name from the currentitem
; - A
<p>
element to display the good's description. Access the description from the currentitem
; - A
<span>
element to display the string "Price:" followed by the good's price. Access the price from the currentitem
.
- An
Var alt klart?
Tak for dine kommentarer!
Sektion 1. Kapitel 15
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.17
Challenge: Display Data Collections in React
Stryg for at vise menuen
Task: Show a Product List
Let's handle the data obtained from the backend and ensure its proper rendering in a list format.
The task is:
- Utilize the
map()
method to render an array of goods. - Ensure to fill the necessary gaps:
h2
must contain the good's name (name
property);p
must contain the good's description (description
property);span
must contain the string "Price:" and the good's price (price
property).
- Use the
map()
method to map over theprops.goods
array. - Ensure to set the
key
prop of the<li>
element to a unique value, such as the id property of the item. - Inside each
<li>
element, use the following elements:- An
<h2>
element to display the good's name. Access the name from the currentitem
; - A
<p>
element to display the good's description. Access the description from the currentitem
; - A
<span>
element to display the string "Price:" followed by the good's price. Access the price from the currentitem
.
- An
Var alt klart?
Tak for dine kommentarer!
Sektion 1. Kapitel 15