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:
  1. h2 must contain the good's name (name property);
  2. p must contain the good's description (description property);
  3. span must contain the string "Price:" and the good's price (price property).

1. Use the map() method to map over the props.goods array.
2. Ensure to set the key prop of the <li> element to a unique value, such as the id property of the item.
3. 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.