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

7 files changed, 44 insertions, 32 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;
diff --git a/src/index.js b/src/index.js
index c096aa7..e63e07e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,24 +1,6 @@
-import React from 'react';
+// import React from 'react';
 import ReactDOM from 'react-dom';
 import "./styles/global.css"
 import App from "./components/App";
 
 ReactDOM.render(App(), document.getElementById("root"))
-
-
-// auto generated code
-// import './index.css';
-// import App from './App';
-// import reportWebVitals from './reportWebVitals';
-
-// ReactDOM.render(
-//   <React.StrictMode>
-//     <App />
-//   </React.StrictMode>,
-//   document.getElementById('root')
-// );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-//reportWebVitals();
diff --git a/src/styles/global.css b/src/styles/global.css
index e5147f8..7d21117 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -27,3 +27,7 @@ body {
 @media only screen and (max-device-width: 480px) {
   .root-content {
     width: 95%; } }
+
+.BillingPage .ItemsList {
+  background-color: red;
+  min-height: 7rem; }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index a3727ec..d9ee9bb 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -20,3 +20,4 @@ body {
     width: 95%;
   }
 }
+