now the products are passed in as props in JSON format

2 files changed, 68 insertions, 45 deletions

diff --git a/src/components/App.js b/src/components/App.js
index d8e94d3..3d184b2 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -2,15 +2,33 @@ import React from "react";
 import Header from "./Header/Header";
 import BillingForm from "./Form/Form.js";
 
+const sampleData = [
+  {
+    "Model": "Kisan Chair",
+    "Description":"Very good chair",
+    "Price":"10000",
+    "Discount":"3%",},
+  {
+    "Model": "Supreme Chair",
+    "Description":"Even better chair",
+    "Price":"2134983",
+    "Discount":"9%",
+  }
+]
+
+console.log("sample data:", sampleData);
+
+
+
 const App = () => {
 	return (
 		<>
 			<Header/>
 			<div className={"root-content"}>
-				<BillingForm/>
+				<BillingForm savedItems={sampleData} />
 			</div>
 		</>
-	)
+	);
 }
 
 export default App;
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
index 1261e4b..3285548 100644
--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@@ -1,55 +1,60 @@
 import React, { useState } from "react";
 import "./Form.css";
 
-const BillingForm = () => {
-  /*
-  const sampleData = [
-    {
-      "Model": "Kisan Chair",
-      "Description":"Very good chair",
-      "Price":"10000",
-      "Discount":"3%"
-    },
-    {
-      "Model": "Supreme Chair",
-      "Description":"Even better chair",
-      "Price":"2134983",
-      "Discount":"9%"
-    }
-  ]
-  */
+
+const BillingForm = (props) => {
   const [itemValue, setItemValue] = useState("");
   const [descValue, setDescValue] = useState("");
 
+  const savedItems = props.savedItems;
+  let savedItemNames = []
+  for (let i = 0; i < savedItems.length; i++) {
+    savedItemNames.push(savedItems[i].Model)
+  }
 
-
+  const filteredItems = savedItemNames.filter(
+    (item) => {
+      // case insensitive
+      return item.toLowerCase().includes(itemValue.toLowerCase());
+    }
+  );
+  
   return (
-    <form onSubmit={
-      (event) => {
-        event.preventDefault();
-        console.log(itemValue, descValue);
-      }
-    }>
-
-      <label>
-        Item: <input type="text" value={itemValue} onChange={
-          (event) => {
-            setItemValue(event.target.value);
+    <div>
+      <form onSubmit={
+        (event) => {
+          event.preventDefault();
+          console.log(itemValue, descValue);
+        }
+      }>
+  
+        <label>
+          Item: <input type="text" value={itemValue} onChange={
+            (event) => {
+              setItemValue(event.target.value);
+            }
+          } />
+        </label>
+  
+        <label>
+          Description: <input type="text" value={descValue} onChange={
+            (event) => {
+              setDescValue(event.target.value);
+            }
+          } />
+        </label>
+
+        <input type="submit" value="add" />
+      </form>
+
+      <ul>
+        {filteredItems.map(
+          (i) => {
+            return <li key={i}>{i}</li>
           }
-        } />
-      </label>
-
-      <label>
-        Description: <input type="text" value={descValue} onChange={
-          (event) => {
-            setDescValue(event.target.value);
-          }
-        } />
-      </label>
-
-      <input type="submit" value="add" />
-
-    </form>
+        )}
+      </ul>
+    </div>
   )
 }