Completed React Hooks Forms Lab

src/components/Filter.js

@@ -1,9 +1,16 @@
 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..."
+        value={search}
+        onChange={(event) => onSearchChange(event.target.value)}
+      />
+
       <select name="filter" onChange={onCategoryChange}>
         <option value="All">Filter by category</option>
         <option value="Produce">Produce</option>
@@ -14,4 +21,4 @@ function Filter({ onCategoryChange }) {
   );
 }
 
-export default Filter;
+export default Filter;

src/components/ItemForm.js

@@ -1,17 +1,44 @@
-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");
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    const newItem = {
+      id: uuid(),
+      name: itemName,
+      category: itemCategory,
+    };
+
+    onItemFormSubmit(newItem);
+
+    setItemName("");
+    setItemCategory("Produce");
+  }
+
   return (
-    <form className="NewItem">
+    <form className="NewItem" onSubmit={handleSubmit}>
       <label>
         Name:
-        <input type="text" name="name" />
+        <input
+          type="text"
+          name="name"
+          value={itemName}
+          onChange={(event) => setItemName(event.target.value)}
+        />
       </label>
 
       <label>
         Category:
-        <select name="category">
+        <select
+          name="category"
+          value={itemCategory}
+          onChange={(event) => setItemCategory(event.target.value)}
+        >
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
           <option value="Dessert">Dessert</option>
@@ -23,4 +50,4 @@ function ItemForm(props) {
   );
 }
 
-export default ItemForm;
+export default ItemForm;

src/components/ShoppingList.js

@@ -5,21 +5,42 @@ import Item from "./Item";
 
 function ShoppingList({ items }) {
   const [selectedCategory, setSelectedCategory] = useState("All");
+  const [search, setSearch] = useState("");
+  const [itemList, setItemList] = useState(items);
 
   function handleCategoryChange(event) {
     setSelectedCategory(event.target.value);
   }
 
-  const itemsToDisplay = items.filter((item) => {
-    if (selectedCategory === "All") return true;
+  function handleSearchChange(searchText) {
+    setSearch(searchText);
+  }
+
+  function handleItemFormSubmit(newItem) {
+    setItemList([...itemList, newItem]);
+  }
+
+  const itemsToDisplay = itemList.filter((item) => {
+    const matchesCategory =
+      selectedCategory === "All" || item.category === selectedCategory;
 
-    return item.category === selectedCategory;
+    const matchesSearch = item.name
+      .toLowerCase()
+      .includes(search.toLowerCase());
+
+    return matchesCategory && matchesSearch;
   });
 
   return (
     <div className="ShoppingList">
-      <ItemForm />
-      <Filter onCategoryChange={handleCategoryChange} />
+      <ItemForm onItemFormSubmit={handleItemFormSubmit} />
+
+      <Filter
+        search={search}
+        onSearchChange={handleSearchChange}
+        onCategoryChange={handleCategoryChange}
+      />
+
       <ul className="Items">
         {itemsToDisplay.map((item) => (
           <Item key={item.id} name={item.name} category={item.category} />
@@ -29,4 +50,4 @@ function ShoppingList({ items }) {
   );
 }
 
-export default ShoppingList;
+export default ShoppingList;