Make Item Form and Filter Controlled

src/components/App.js

@@ -11,10 +11,14 @@ function App() {
     setIsDarkMode((isDarkMode) => !isDarkMode);
   }
 
+  const onItemFormSubmit = (item) => {
+    setItems([...items, item])
+  }
+
   return (
     <div className={"App " + (isDarkMode ? "dark" : "light")}>
       <Header isDarkMode={isDarkMode} onDarkModeClick={handleDarkModeClick} />
-      <ShoppingList items={items} />
+      <ShoppingList items={items} onItemFormSubmit={onItemFormSubmit} />
     </div>
   );
 }

src/components/Filter.js

@@ -1,9 +1,9 @@
 import React from "react";
 
-function Filter({ onCategoryChange }) {
+function Filter({ onCategoryChange, onSearchChange, search }) {
   return (
     <div className="Filter">
-      <input type="text" name="search" placeholder="Search..." />
+      <input type="text" name="search" placeholder="Search..." onChange={onSearchChange} value={search}/>
       <select name="filter" onChange={onCategoryChange}>
         <option value="All">Filter by category</option>
         <option value="Produce">Produce</option>

src/components/ItemForm.js

@@ -1,17 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
 import { v4 as uuid } from "uuid";
 
-function ItemForm(props) {
+function ItemForm({ onItemFormSubmit}) {
+  const [itemName, setItemName] = useState('')
+  const [itemCategory, setItemCategory] = useState('Produce')
+
+  const handleNameChange = (event) => {
+    setItemName(event.target.value)
+  }
+
+  const handleSelectChange = (event) => {
+    setItemCategory(event.target.querySelector("option:checked").value)
+  }
+
+  const newItem = {
+    id: uuid(),
+    name: itemName,
+    category: itemCategory,
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    onItemFormSubmit(newItem)
+  }
   return (
-    <form className="NewItem">
+    <form className="NewItem" onSubmit={handleSubmit}>
       <label>
         Name:
-        <input type="text" name="name" />
+        <input type="text" name="name" value={itemName} onChange={handleNameChange} />
       </label>
 
       <label>
         Category:
-        <select name="category">
+        <select name="category" onChange={handleSelectChange}>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
           <option value="Dessert">Dessert</option>

src/components/ShoppingList.js

@@ -3,23 +3,31 @@ import ItemForm from "./ItemForm";
 import Filter from "./Filter";
 import Item from "./Item";
 
-function ShoppingList({ items }) {
+function ShoppingList({ items, onItemFormSubmit }) {
   const [selectedCategory, setSelectedCategory] = useState("All");
+  const [selectedName, setSelectedName] = useState("");
 
   function handleCategoryChange(event) {
     setSelectedCategory(event.target.value);
   }
 
-  const itemsToDisplay = items.filter((item) => {
-    if (selectedCategory === "All") return true;
+  const handleSearchChange = (event) => {
+    setSelectedName(event.target.value);
+  }
 
+  const matchCategory = (item, selectedCategory) => {
+    if (selectedCategory === "All") return true;
     return item.category === selectedCategory;
+  }
+
+  const itemsToDisplay = items.filter((item) => {
+    return matchCategory(item, selectedCategory) && item.name.includes(selectedName);
   });
 
   return (
     <div className="ShoppingList">
-      <ItemForm />
-      <Filter onCategoryChange={handleCategoryChange} />
+      <ItemForm onItemFormSubmit={onItemFormSubmit} />
+      <Filter onCategoryChange={handleCategoryChange} onSearchChange={handleSearchChange} search={selectedName} />
       <ul className="Items">
         {itemsToDisplay.map((item) => (
           <Item key={item.id} name={item.name} category={item.category} />