React002-A— State and Events Lab

• Update state based on events
• Work with multiple state variables together

code: https://github.com/learn-co-curriculum/react-hooks-state-and-events-lab

video: https://www.youtube.com/watch?v=m2t_SZSO6ng

Deliverables

Dark Mode Toggle

//App.js
import React, { useState } from "react";
import ShoppingList from "./ShoppingList";
import itemData from "../data/items";

function App() {

  // replace 'false' with a state variable that can be toggled between true and false
  // this will be used for the Dark Mode Toggle feature

  const [ isDarkMode, setIsDarkMode ] = useState(false)

  // const appClass = false ? "App dark" : "App light"

  const handleToggle = () => {
    console.log(isDarkMode)
    setIsDarkMode(!isDarkMode)
  }
  
  return (
    <div className={isDarkMode ? "App dark" : "App light"}>
      <header>
        <h2>Shopster</h2>
        <button onClick ={handleToggle}>{isDarkMode? "Dark Mode":"Light Mode"}</button>
      </header>
      <ShoppingList items={itemData} />
    </div>
  );
}

export default App;

Add to Cart

//Item.js
import React, { useState } from "react";

function Item({ name, category}) {

  const [ inCart, setInCart ] = useState(false)

  const handleClick = () => {
    setInCart(!inCart)
  }

  return (
    <li className={inCart? "in-cart" : ""}>
      <span>{name}</span>
      <span className="category">{category}</span>
      <button onClick={handleClick} className="add">Add to Cart</button>
    </li>
  );
}

export default Item;

Filter

https://react.dev/reference/react-dom/components/select

google react select state

//ShoppingList
import React, { useState } from "react";
import Item from "./Item";

function ShoppingList({ items }) {

  const [ selectedCategory, setSelectedCategory ] = useState(items)

  const handleSelect = (e) => {

    const filteredItemsArr = items.filter((item) => {
     return e.target.value === item.category
    })
    setSelectedCategory(filteredItemsArr)
  }

  return (
    <div className="ShoppingList">

      <div className="Filter">
        <select name="filter" onChange={handleSelect}>
          <option value="All">Filter by category</option>
          <option value="Produce">Produce</option>
          <option value="Dairy">Dairy</option>
          <option value="Dessert">Dessert</option>
        </select>
      </div>

      <ul className="Items">
        {selectedCategory.map((item) => (
          <Item key={item.id} name={item.name} category={item.category} />
        ))}
      </ul>

    </div>
  );
}

export default ShoppingList;