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 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Β 1. ChapterΒ 15
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 2.17
Challenge: Display Data Collections in React
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:
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 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Β 1. ChapterΒ 15