now data is properly being passed from AddNewItemForm to ItemsDisplay which properly renders it

2 files changed, 15 insertions, 20 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 1ff8654..0726f3c 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -26,22 +26,10 @@ const BillingPage = () => {
   // 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.Model]
+      [...items, item]
     );
   };
 
diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
index 9507e5b..766d16f 100644
--- a/src/components/Display/ItemsDisplay.js
+++ b/src/components/Display/ItemsDisplay.js
@@ -7,13 +7,20 @@ const ItemsDisplay = (props) => {
   return (
     <div className={"ItemsDisplay"}>
       <ol>
-        {
-          items.map(
-            (item) => {
-              return <li key={item}>{item}</li>
-            }
-          )
-        }
+        {items.map( (item) => {
+          return (
+            <li>
+              <ul>
+                <li key={item.Model}>{item.Model}</li>
+                <li key={item.Description}>{item.Description}</li>
+                <li key={item.Quantity}>{item.Quantity}</li>
+                <li key={item.Price}>{item.Price}</li>
+                <li key={item.Discount}>{item.Discount}</li>
+                <li key={item.GST}>{item.GST}</li>
+              </ul>
+            </li>
+          );
+        })}
       </ol>
     </div>
   );