React - props.children - exercise

Create a component named ShopList. It should take an array with shopping cart elements in the props.

Objects need to follow the format:

{
    title:   "item name",
    image:   "url_for_item_image"
}

In a div with the shoplist CSS class, display only ShopItemHeader components with appropriate data. Use map().

Render the component on the page, passing the following items to props:

[
  {
    title: "Computer mouse",
    image: "https://upload.wikimedia.org/wikipedia/commons/c/c5/Red_computer_mouse.jpg"
  },
  {
    title: "Keyboard",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Computer_keyboard_Danish_layout.svg/1000px-Computer_keyboard_Danish_layout.svg.png"
  },
  {
    title: "Programmer's laptop",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Typing_computer_screen_reflection.jpg/640px-Typing_computer_screen_reflection.jpg"
  }
]

Remember to create the main App component as well. Render the App component on the page.

Do this exercise with class components only.

Last updated