Now the data is being pass correctly from AddNewItemForm to ItemDisplay but I need to work on processing the data

2 files changed, 30 insertions, 6 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index b06e876..1ff8654 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -23,21 +23,34 @@ const sampleData = [
 
 
 const BillingPage = () => {
-  const [items, setItems] = useState([]);
+  // to be handled by backend
   const defGSTValue = 18;
 
+  /* Note to the dumbass coding this alone
+   * Right now only the models are getting passed
+   * into ItemsDisplay because I wanted to
+   * take screenshots and shit. 
+   * Implement a feature such that I can pass in a
+   * whole array of objects and ItemsDisplay processes
+   * the itemNames, prices and shit. 
+   * This file should only handle 
+   * getting the items from AddNewItemForm
+   * putting it into the list
+   * and pass it into ItemsDisplay 
+   */
+  const [items, setItems] = useState([]);
   const getItems = (item) => {
     setItems(
-        [...items, item]
+      [...items, item.Model]
     );
-  }
+  };
 
   console.log(items)
   return (
     <div>
       <AddNewItemForm savedItems={sampleData} addItem={getItems} defGSTValue={defGSTValue}/>
 
-      <ItemsDisplay/>
+      <ItemsDisplay items={items}/>
     </div>
   );
 }
diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
index 5e09a5c..9507e5b 100644
--- a/src/components/Display/ItemsDisplay.js
+++ b/src/components/Display/ItemsDisplay.js
@@ -1,11 +1,22 @@
 import React from "react";
 import "./Display.css";
 
-const ItemsDisplay = () => {
+const ItemsDisplay = (props) => {
+  const items = props.items;
+
   return (
     <div className={"ItemsDisplay"}>
+      <ol>
+        {
+          items.map(
+            (item) => {
+              return <li key={item}>{item}</li>
+            }
+          )
+        }
+      </ol>
     </div>
-  )
+  );
 }
 
 export default ItemsDisplay;