Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Display Data Collections in React | Fundamentals of React and Component-Based UI
React Mastery
course content

Course Content

React Mastery

React Mastery

2. Styling Techniques in React Applications
4. Structuring Real-World React Projects

book
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:
    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.

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 1. ChapterΒ 15
We're sorry to hear that something went wrong. What happened?
some-alt