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