Challenge: Display Data Collections
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:
h2must contain the good's name (nameproperty);pmust contain the good's description (descriptionproperty);spanmust contain the string "Price:" and the good's price (priceproperty).
- Use the
map()method to map over theprops.goodsarray. - Ensure to set the
keyprop 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
Everything was clear?
Thanks for your feedback!
Section 2. Chapter 7
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 4
Challenge: Display Data Collections
Swipe to show menu
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:
h2must contain the good's name (nameproperty);pmust contain the good's description (descriptionproperty);spanmust contain the string "Price:" and the good's price (priceproperty).
- Use the
map()method to map over theprops.goodsarray. - Ensure to set the
keyprop 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
Everything was clear?
Thanks for your feedback!
Section 2. Chapter 7