yatania / react_goods-selector

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Goods selector

Task

  1. You are given an array of goods
  2. Display them as a list inside the App (DON'T create additional components)
  3. Add h1 initially saying No goods selected
  4. Save a selectedGood in the App. Let it be Jam by default
  5. The h1 should always show the name of the selected good Jam is selected
  6. The selected good should be hightlighted in the list (add CSS class with a background)
  7. Add a button Select next to each good in the list
  8. When you press the button the good becomes selected
  9. Don't show the button next to the selected good
  10. You can select another good by pressing its Select button
  11. Add button X for to the h1 to clear the selection. (Set null)
  12. The clear button should not be visible if there is no selected good

(* Optional) Advanced task

  1. Implement the ability to select multiple goods (use selectedGoods Array)
  2. Use functional setState described in this video
  3. Show Add or Remove instead of Select button
  4. All the selected goods should be listed in the h1:
    • No goods selected
    • Jam is selected
    • Carrot, Jam and Eggs are selected

About


Languages

Language:JavaScript 70.3%Language:HTML 27.7%Language:SCSS 2.0%