designed DisplayItem and ItemsDisplay so it now renders a pretty table

1 files changed, 40 insertions, 0 deletions

diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js
new file mode 100644
index 0000000..dae87a3
--- /dev/null
+++ b/src/components/Display/DisplayItem.js
@@ -0,0 +1,40 @@
+import React from "react";
+import "./Display.css";
+
+const DisplayItem = (props) => {
+  const itemNumber = props.itemNumber;
+  const item = props.item;
+  // const ID = props.ID;
+  // const name = props.Model;
+  // const desc = props.Description;
+  // const QTY = props.Quantity;
+  // const price = props.Price;
+  // const discount = props.Discount;
+  // const GST = props.GST;
+
+  return (
+    <tr>
+      <td>{itemNumber}</td>
+      <td className={"leftAlign"}>{item.Model}</td>
+      <td className={"leftAlign"}>{item.Description}</td>
+      <td>{item.Quantity}</td>
+      <td>{item.Price}</td>
+      <td>{item.Discount}</td>
+      <td>{item.GST}</td>
+    </tr>
+  );
+  /*return (
+    <ul className={"DisplayItem"}>
+      <li className={"num"}>{itemNumber}</li>
+
+      <li className={"text"}>{item.Model}</li>
+      <li className={"text"}>{item.Description}</li>
+      <li className={"num"}>{item.Quantity}</li>
+      <li className={"num"}>{item.Price}</li>
+      <li className={"num"}>{item.Discount}</li>
+      <li className={"num"}>{item.GST}</li>
+    </ul>
+  );*/
+}
+
+export default DisplayItem;