Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Rendering a Data Collection | Introduction to React Fundamentals
Mastering React

Challenge: Rendering a Data Collection

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;
    • <p> element to display the good's description. Access the description from the current item;
    • <span> element to display the string "Price:" followed by the good's price. Access the price from the current item.

Everything was clear?

Section 1. Chapter 15
course content

Course Content

Mastering React

Challenge: Rendering a Data Collection

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;
    • <p> element to display the good's description. Access the description from the current item;
    • <span> element to display the string "Price:" followed by the good's price. Access the price from the current item.

Everything was clear?

Section 1. Chapter 15
some-alt