Create Forms That Have Input in Controlled State

src/components/App.js

@@ -14,7 +14,7 @@ function App() {
   return (
     <div className={"App " + (isDarkMode ? "dark" : "light")}>
       <Header isDarkMode={isDarkMode} onDarkModeClick={handleDarkModeClick} />
-      <ShoppingList items={items} />
+      <ShoppingList items={items} setItems={setItems}/>
     </div>
   );
 }

src/components/Filter.js

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

src/components/ItemForm.js

@@ -1,17 +1,39 @@
-import React from "react";
+import React, {useState} from "react";
 import { v4 as uuid } from "uuid";
 
-function ItemForm(props) {
+function ItemForm({onItemFormSubmit}) {
+  const [name, setName] = useState("")
+  const [category, setCategory] = useState("Produce")
+
+  function handleNameChange(event) {
+    setName(event.target.value)
+  }
+
+  function handleCategoryChange(event) {
+    setCategory(event.target.value)
+  }
+
+  function handleFormSubmit(event) {
+    event.preventDefault()
+    const newItem ={
+      id: uuid(),
+      name: name,
+      category: category
+    }
+    onItemFormSubmit(newItem)
+  }
+
+
   return (
-    <form className="NewItem">
+    <form className="NewItem" onSubmit={handleFormSubmit}>
       <label>
         Name:
-        <input type="text" name="name" />
+        <input type="text" name="name" onChange={handleNameChange} value={name}/>
       </label>
 
       <label>
         Category:
-        <select name="category">
+        <select name="category" onChange={handleCategoryChange} value={category}>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
           <option value="Dessert">Dessert</option>

src/components/ShoppingList.js

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