View Code? Open in Web Editor
NEW
This project forked from mate-academy/react_goods-selector
License: GNU General Public License v3.0
Shell 0.82%
JavaScript 75.86%
TypeScript 14.95%
HTML 7.81%
SCSS 0.56%
react_goods-selector's Introduction
- You are given an array of goods
- Display them as a list inside the
App
(DON'T create additional components)
- Add
h1
initially saying No goods selected
- Save a
selectedGood
in the App
. It should be Jam
by default
- The
h1
should always show the name of the selected good Jam is selected
- The selected good should be highlighted in the list (add CSS class with a background)
- Add a button
Select
next to each good in the list
- When you press the
Select
button the good becomes selected
- Don't show the
Select
button next to the selected good
- When the good is selected, the
Select
button should be displayed as Remove
- When you press the
Remove
button the good becomes unselected
- You can select another good by pressing its
Select
button
- Add button
Clear
to the h1
to clear the selection. (Set empty string ''
)
- The clear button should not be visible if there is no selected good
(* Optional) Advanced task
- Implement the ability to select
multiple goods
(use selectedGoods
Array)
- Use functional
setState
described in the next lesson Functional setState
- All the selected goods should be listed in the
h1
:
No goods selected
Jam is selected
Carrot, Jam and Eggs are selected
- Add some styles, you are frontend developer :) (use Bulma or another library)
react_goods-selector's People