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 selectedJam is selectedCarrot, Jam and Eggs are selected
- Add some styles, you are frontend developer :) (use Bulma or another library)
react_goods-selector's People
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent