Create select field to filter products

src/component/ProductForm.jsx

@@ -128,7 +128,6 @@ export default function ProductForm(props) {
               type="text"
               className="form-control"
               id="productSku"
-              disabled={method === "PUT" ? true : false}
               value={form.sku}
               onChange={(e) => setForm({ ...form, sku: e.target.value })}
             />

src/component/ProductIndex.jsx

 import React, { useEffect, useState } from "react";
-import ProductTable from "./ProductTable.jsx"
+import ProductTable from "./ProductTable.jsx";
 import Config from "../config.js";
 import { Link } from "react-router-dom";
 
 export default function ProductIndex() {
   const [products, setProducts] = useState([]);
+  const [displayProducts, setDisplayProducts] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [activeCategory, setActiveCategory] = useState("");
 
+  console.log(displayProducts);
   const fetchProducts = async () => {
     const res = await fetch(`${Config.inventoryUrl}`);
     if (res.ok) {
       const data = await res.json();
       setProducts([...data]);
+      setDisplayProducts([...data]);
+      setCategories([
+        ...data.reduce((acc, prod) => {
+          if (!acc.includes(prod.category)) {
+            acc.push(prod.category);
+          }
+          return acc;
+        }, []),
+      ]);
     }
   };
 
@@ -26,10 +39,37 @@ export default function ProductIndex() {
           + New Product
         </Link>
       </div>
-      {products.length > 0
-      ? <ProductTable productData={products} />
-      : <p>No products found.</p>
-      }
+      {products.length > 0 ? (
+        <>
+            <label htmlFor="category-select" className="form-label">Category</label>
+            <select
+              className="form-select w-25 mt-1"
+              id="category-select"
+              onChange={(e) => {
+                if (e.target.value === "") {
+                  setDisplayProducts([...products]);
+                  return;
+                }
+                const filtered = products.filter(
+                  (prod) => prod.category === e.target.value
+                );
+                setDisplayProducts([...filtered]);
+              }}
+            >
+              <option></option>
+              {categories.map((category, i) => (
+                <option key={i + 679}>{category}</option>
+              ))}
+            </select>
+          <ProductTable
+            productData={displayProducts}
+            fetchProducts={fetchProducts}
+            products={displayProducts}
+          />
+        </>
+      ) : (
+        <p>No products found.</p>
+      )}
     </div>
   );
 }

src/component/ProductTable.jsx

@@ -4,16 +4,16 @@ import { Container, Table } from "react-bootstrap";
 import Config from "../config.js";
 import { deleteProduct } from "../actions/apiRequests";
 
-export default function ProductTable({ productData }) {
-  const [products, setProducts] = useState([productData]);
+export default function ProductTable({ fetchProducts, products }) {
+  // const [products, setProducts] = useState([...productData]);
 
-  const fetchProducts = async () => {
-    const res = await fetch(`${Config.inventoryUrl}`);
-    if (res.ok) {
-      const data = await res.json();
-      setProducts([...data]);
-    }
-  };
+  // const fetchProducts = async () => {
+  //   const res = await fetch(`${Config.inventoryUrl}`);
+  //   if (res.ok) {
+  //     const data = await res.json();
+  //     setProducts([...data]);
+  //   }
+  // };
 
   const handleDelete = (sku) => {
     deleteProduct(sku)