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 theΒprops.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 currentΒitem; - AΒ
<p>Β element to display the good's description. Access the description from the currentΒitem; - AΒ
<span>Β element to display the string "Price:" followed by the good's price. Access the price from the currentΒitem.
- 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 theΒprops.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 currentΒitem; - AΒ
<p>Β element to display the good's description. Access the description from the currentΒitem; - AΒ
<span>Β element to display the string "Price:" followed by the good's price. Access the price from the currentΒitem.
- AnΒ
Everything was clear?
Thanks for your feedback!
SectionΒ 2. ChapterΒ 7