https://github.com/mosnad-web01/abdulaziz-react-hooks-state-and-events-lab

https://github.com/mosnad-web01/abdulaziz-react-hooks-state-and-events-lab

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/mosnad-web01/abdulaziz-react-hooks-state-and-events-lab
• Owner: Mosnad-Web01
• License: other
• Created: 2024-09-09T18:17:30.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-09T19:01:16.000Z (4 months ago)
• Last Synced: 2024-11-14T16:48:02.473Z (2 months ago)
• Language: JavaScript
• Size: 172 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# React State Lab

## Learning Goals

- Update state based on events

- Work with multiple state variables together

## Introduction

In the labs for this section, we'll be working on a grocery list app. Some of

this app is already built out using static versions of the components. We'll be

using **state** and **events** to make our app dynamic.

The components you have to work with are in the `src/components` folder. Start

by examining these components and draw out your component hierarchy to see how

data can be passed from one component to another.

In this lab, you'll update state and get more practice with the `useState` hook.

It's recommended that you run `npm start` and work on this in the browser

**before** running tests. Try to get your app to match the demo! Once you've

built out the components below, run `npm test` to see if your code passes the

tests.

![demo](https://curriculum-content.s3.amazonaws.com/phase-2/react-hooks-state-and-events-lab/demo.gif)

## Deliverables

### Dark Mode Toggle

In the `App` component, there is a button for toggling between dark mode and

light mode. Using the `useState` hook, create a state variable in the `App`

component. Then, use that variable to determine if our app should be in dark

mode or light mode.

You will also need to add an event handler to the dark mode button, and update

state when the button is clicked.

The actual functionality of changing our app's theme is handled in CSS, so all

you have to do is set up the code to update the `className` of the div based on

your state variable:

```jsx



{/* for dark mode */}





{/* for light mode */}



```


### Add to Cart

In the `Item` component, when the user clicks the `` element, the item

should be added to their virtual cart. The way we'll show the user that the item

is in the cart is by changing the className on the `
` element:


```jsx



{/* the item is in the cart */}





{/* the item is NOT in the cart */}



```


If the item _is not_ in the cart, the `` element's text should read "Add

to Cart", and if the item _is_ in the cart, the `` element's text should

read "Remove From Cart". Naturally, you'll also need to add state to the `Item`

component to solve this deliverable!

### Filter

In the `ShoppingList` component, there is a `` element that will allow

us to **filter** the list of items by category.

Use the `useState` hook to create a state variable called `selectedCategory` for

keeping track of the selected value from this `` element. When the value

of the `` element is **changed**, update state.

You should also use the `selectedCategory` variable to determine which items to

display in the shopping list. You'll need some way of **filter**ing the array of

items based on the `selectedCategory`.

## Resources

- [React Docs on `useState`](https://reactjs.org/docs/hooks-state.html)