Used State to Make Page Dynamic

src/components/App.js

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

src/components/Item.js

@@ -1,11 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Item({ name, category }) {
+  const [count, setCount] = useState(false)
+  const updateClass = count ? 'in-cart' : ''
+  const updateButtonText = count ? 'Remove From Cart' : 'Add to Cart'
   return (
-    <li className="">
+    <li className={ updateClass }>
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button className="add" onClick={() => setCount(count => !count)}>
+        { updateButtonText }
+      </button>
     </li>
   );
 }

src/components/ShoppingList.js

@@ -1,21 +1,25 @@
-import React from "react";
+import React, { useState } from "react";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+
+  const [count, setCount] = useState('All')
+  const filterByCategory = count === 'All' ? items : items.filter(item => item.category === count)
+
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select onChange={(event) => setCount(event.target.value)} 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) => (
-          <Item key={item.id} name={item.name} category={item.category} />
-        ))}
+        { filterByCategory.map((item) => (
+    <Item key={item.id} name={item.name} category={item.category} />
+  )) }
       </ul>
     </div>
   );