mate-academy / react_goods-selector

React Goods Selector

React + Typescript cheat sheet

You are given an array of goods. Render them in a table with the ability to select one or clear selection.

Here is the working version

1. Write everything inside the App (don't create additional components).
2. Save a selectedGood in the state (Jam is the default value).
3. Show the name of the selected good in the h1.title (Jam is selected).
4. Add the has-background-success-light class to the tr of the selected Good.
5. Show the ClearButton button in the title only when a good is selected.
6. ClearButton should clear selection by setting an empty string to selectedGood.
7. When there is no selected good, the title should show No goods selected.
8. Each good should have an AddButton to select the good.
   • only 1 good can be selected at a time;
9. Don't show AddButton when a good is selected.
10. Show RemoveButton for the selected good to clear selection.

Instructions

• Install Prettier Extention and use this VSCode settings to enable format on save.
• Implement a solution following the React task guideline.
• Use the React TypeScript cheat sheet.
• Open one more terminal and run tests with npm test to ensure your solution is correct.
• Replace <your_account> with your Github username in the DEMO LINK and add it to the PR description.