Practice using React state to share dynamic values across different parts of an app.
Make sure you have Git and Node (v20) installed.
- Use this template, clone your copy,
cd
into it - Run
npm install
to install all the dependencies - Run
npm run dev
to start the local dev server
Each challenge has associated unit tests. You can run each challenge's tests with npm run test:1
, npm run test:2
etc.
Make sure you read test failures carefully—the output can be noisy but the error message should provide useful information to help you.
The App
component in challenge/App.tsx
is getting a bit noisy. It's usually a good idea to start writing all your code in one component, since you don't know exactly what you need yet. But now there's a few established sections we should extract them to separate components.
- Extract the "Price" fieldset to a new file called
FilterPrice.tsx
- Extract the "Category" fieldset to a new file called
FilterCategory.tsx
- Extract the unordered list rendering the dishes to a new file called
ListDishes.tsx
- Import and render the components in
App.tsx
so the UI stays the same
The max price range input currently does nothing.
- Create a state value representing the maximum price filter
- Control the state value with the max price range input
- Filter the dish list to only show dishes cheaper than the chosen max price
Remember this state needs to be used in two places, so think carefully about where it should be defined.
The category radio inputs currently do nothing.
- Create a state value representing the checked category
- Control the state value with the category radio inputs
- Filter the dish list to only show dishes with the category selected (or every dish for "all")
- Make sure the price filtering keeps working