Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Display Data Collections | Reusable Components and Data Flow
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Introduction to React

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

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 7

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

bookChallenge: Display Data Collections

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:
    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Β 2. ChapterΒ 7
some-alt