Course Content
React Mastery
React Mastery
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
.
Thanks for your feedback!