using useState to update array of items to be added in the invoice now

4 files changed, 38 insertions, 13 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index ca51651..b06e876 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -1,6 +1,6 @@
-import React from "react";
-import AddNewItemForm from "./Form/AddNewItemForm.js";
-
+import React, { useState } from "react";
+import AddNewItemForm from "./Form/AddNewItemForm";
+import ItemsDisplay from "./Display/ItemsDisplay";
 
 const sampleData = [
   {
@@ -21,19 +21,24 @@ const sampleData = [
   }
 ];
 
-// called when AddNewItemForm is submitted
-let addedItems = [];
-const getAddedItems = (item) => {
-  addedItems.push(item);
-}
-
-const defGSTValue = 18;
 
 const BillingPage = () => {
+  const [items, setItems] = useState([]);
+  const defGSTValue = 18;
+
+  const getItems = (item) => {
+    setItems(
+        [...items, item]
+    );
+  }
+
+  console.log(items)
   return (
-    <>
-      <AddNewItemForm savedItems={sampleData} addItem={getAddedItems} defGSTValue={defGSTValue}/>
-    </>
+    <div>
+      <AddNewItemForm savedItems={sampleData} addItem={getItems} defGSTValue={defGSTValue}/>
+
+      <ItemsDisplay/>
+    </div>
   );
 }
 
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
new file mode 100644
index 0000000..1b89173
--- /dev/null
+++ b/src/components/Display/Display.css
@@ -0,0 +1,3 @@
+.ItemsDisplay {
+  margin-top: 3rem;
+  margin-bottom: 3rem; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
new file mode 100644
index 0000000..e3d8b7c
--- /dev/null
+++ b/src/components/Display/Display.scss
@@ -0,0 +1,6 @@
+.ItemsDisplay {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+
+  
+}
diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
new file mode 100644
index 0000000..5e09a5c
--- /dev/null
+++ b/src/components/Display/ItemsDisplay.js
@@ -0,0 +1,11 @@
+import React from "react";
+import "./Display.css";
+
+const ItemsDisplay = () => {
+  return (
+    <div className={"ItemsDisplay"}>
+    </div>
+  )
+}
+
+export default ItemsDisplay;