> For the complete documentation index, see [llms.txt](https://krzysztof-wierzbicki.gitbook.io/main/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://krzysztof-wierzbicki.gitbook.io/main/writing-samples/2022-2-front-end-react-composition-props-children/2022-3-front-end-react-composition-props-children-exercise.md).

# 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:

```js
{
    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:

```js
[
  {
    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**.