Annie pawl/checkout form

client/App/App.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { HashRouter as Router, Route } from "react-router-dom";
 import Login from "../Login/Login.jsx";
 import Register from '../Register/Register.jsx'
+import CheckoutFrom from '../CheckoutForm/CheckoutForm.jsx'
 
 import "./App.css";
 
@@ -11,6 +12,7 @@ function App() {
       <Router>
         <Route path="/Login" exact component={Login} />
         <Route path="/Register" exact component={Register} />
+        <Route path="/Checkout-Form" exact component={CheckoutForm} />
       </Router>
     </div>
   );

client/CheckoutForm/CheckoutForm.jsx

@@ -12,77 +12,115 @@ class CheckoutForm extends Component {
       checkoutDuration: '',
       date: '',
       reasonForCheckout: '',
-
     }
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleChange = (e) => {
+    const newState = {}
+    newState[e.target.name] = e.target.value,
+      newState[e.target.id] = e.target.value,
+      newState[e.target.email] = e.target.value,
+      newState[e.target.phoneNumber] = e.target.value,
+      newState[e.target.checkoutDuration] = e.target.value,
+      newState[e.target.date] = e.target.value,
+      newState[e.target.reasonForCheckout] = e.target.value,
+
+      this.setState(newState)
   }
 
-  render() {
-    return (
-      <div>
-        <div className='checkout_form_container'>
-          <div className='checkout_square'>
-            <h1 className='checkout_title'>Checkout Form</h1>
-            <form className='checkout_form'>
-
-              {/* Name Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Name' />
-
-              {/* Company ID Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Company ID'
-              />
-
-              {/* Email Address Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Email Address' />
-
-              {/* Phone Number Field  */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Phone Number' />
-
-              {/* Duration of Checkout Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Duration of Checkout' />
-
-              {/* Date Field */} {/* TODO - make dropdown calendar */}
-              <input
-                className='checkout_input_field'
-                type='type'
-                value=''
-                placeholder='Date' />
-
-              {/* Reason for Checkout Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Reason for Checkout' />
-
-            </form>
-
-            <button className='checkout_form_button'>Checkout</button>
-          </div>
+  handleSubmit = (e) => {
+    e.preventDefault()
+
+
+  }
+}
+
+render() {
+
+  return (
+    <div>
+      <div className='checkout_form_container'>
+        <div className='checkout_square'>
+          <h1 className='checkout_title'>Checkout Form</h1>
+          <form className='checkout_form' state={this.state} onChange={state => this.setState(state)}>
+
+            {/* Name Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.name}
+              onChange={this.handleChange}
+              placeholder='Name'
+            />
+
+            {/* Company ID Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.id}
+              onChange={this.handleChange}
+              placeholder='Company ID'
+            />
+
+            {/* Email Address Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.email}
+              onChange={this.handleChange}
+              placeholder='Email Address'
+            />
+
+            {/* Phone Number Field  */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.phoneNumber}
+              onChange={this.handleChange}
+              placeholder='Phone Number'
+            />
+
+            {/* Duration of Checkout Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.checkoutDuration}
+              onChange={this.handleChange}
+              placeholder='Duration of Checkout'
+            />
+
+            {/* Date Field */}
+            {' '}
+            {/* TODO - make dropdown calendar */}
+            <input
+              className='checkout_input_field'
+              type='type'
+              value={this.date}
+              onChange={this.handleChange}
+              placeholder='Date'
+            />
+
+            {/* Reason for Checkout Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.reasonForCheckout}
+              onChange={this.handleChange}
+              placeholder='Reason for Checkout'
+            />
+
+          </form>
+
+          <button className='checkout_form_button'>Checkout</button>
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 
+
+
 export default CheckoutForm

client/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./App/App.jsx";
+import App from './App/App.jsx'
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));