Sample solution

src/components/App.js

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

src/components/Item.js

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

src/components/ShoppingList.js

@@ -1,24 +1,36 @@
-import React from "react";
-import Item from "./Item";
+import React, { useState } from "react"
+import Item from "./Item"
 
 function ShoppingList({ items }) {
+  const [filteredItems, setFilterItems] = useState(items)
+
+  const handleFilterChange = ({ target: { value } }) => {
+    const newFilteredItems = items.filter((item) => {
+      if (value === "All") return true
+
+      return item.category === value
+    })
+
+    setFilterItems(newFilteredItems)
+  }
+
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select onChange={handleFilterChange} name="filter">
           <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) => (
+        {filteredItems.map((item) => (
           <Item key={item.id} name={item.name} category={item.category} />
         ))}
       </ul>
     </div>
-  );
+  )
 }
 
-export default ShoppingList;
+export default ShoppingList