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