State and Events Lab

src/components/App.js

@@ -1,18 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
+
 import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
 
 function App() {
+  const [isOn, setIsOn] = useState(false);
+
+  function handleClick() {
+    setIsOn((isOn) => !isOn);
+  }
 
   // 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 appClass = false ? "App dark" : "App light"
+  const appClass = isOn ? "App dark" : "App light";
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={handleClick}>{isOn ? "Dark" : "Light"} Mode</button>
       </header>
       <ShoppingList items={itemData} />
     </div>

src/components/Item.js

@@ -1,11 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Item({ name, category }) {
+  const [isInCart, setIsInCart] = useState(false);
+
+  function handleClick() {
+    setIsInCart((isInCart) => !isInCart);
+  }
+
   return (
-    <li className="">
+    <li className={isInCart ? "in-cart" : ""}>
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button className="add" onClick={handleClick}>
+        {isInCart ? "Remove from" : "Add To"} Cart
+      </button>
     </li>
   );
 }

src/components/ShoppingList.js

@@ -1,19 +1,31 @@
-import React from "react";
+import React, { useState } from "react";
+
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+  const [displayItems, setDisplayItems] = useState(items);
+
+  function handleChange(event) {
+    setDisplayItems(
+      items.filter((item) => {
+        if (event.target.value === "All") return true;
+        else return item.category === event.target.value;
+      })
+    );
+  }
+
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select name="filter" onChange={handleChange}>
           <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">
-        {items.map((item) => (
+        {displayItems.map((item) => (
           <Item key={item.id} name={item.name} category={item.category} />
         ))}
       </ul>