Played around with forms

3 files changed, 65 insertions, 0 deletions

diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
new file mode 100644
index 0000000..d0ecc5f
--- /dev/null
+++ b/src/components/Form/Form.css
@@ -0,0 +1,4 @@
+form {
+  border: 1px solid purple;
+  display: flex;
+  justify-content: space-evenly; }
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
new file mode 100644
index 0000000..1261e4b
--- /dev/null
+++ b/src/components/Form/Form.js
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import "./Form.css";
+
+const BillingForm = () => {
+  /*
+  const sampleData = [
+    {
+      "Model": "Kisan Chair",
+      "Description":"Very good chair",
+      "Price":"10000",
+      "Discount":"3%"
+    },
+    {
+      "Model": "Supreme Chair",
+      "Description":"Even better chair",
+      "Price":"2134983",
+      "Discount":"9%"
+    }
+  ]
+  */
+  const [itemValue, setItemValue] = useState("");
+  const [descValue, setDescValue] = useState("");
+
+
+
+  return (
+    <form onSubmit={
+      (event) => {
+        event.preventDefault();
+        console.log(itemValue, descValue);
+      }
+    }>
+
+      <label>
+        Item: <input type="text" value={itemValue} onChange={
+          (event) => {
+            setItemValue(event.target.value);
+          }
+        } />
+      </label>
+
+      <label>
+        Description: <input type="text" value={descValue} onChange={
+          (event) => {
+            setDescValue(event.target.value);
+          }
+        } />
+      </label>
+
+      <input type="submit" value="add" />
+
+    </form>
+  )
+}
+
+export default BillingForm;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
new file mode 100644
index 0000000..01f9bf2
--- /dev/null
+++ b/src/components/Form/Form.scss
@@ -0,0 +1,5 @@
+form {
+  border: 1px solid purple;
+  display: flex;
+  justify-content: space-evenly;
+}