forms: parent - child 2 way binding for capturing input fields

ecom-web/src/components/checkout/PaymentMethod.js

 import React, {useState, useEffect} from 'react'
 
-export default function PaymentMethod() {
+export default function PaymentMethod(props) {
     return (
         <div id="PaymentInput">
 
@@ -9,19 +9,32 @@ export default function PaymentMethod() {
             </div>
 
             <div className="shippingInfoInput" id="cardNumberInput">
-                <input placeholder="Card Number"></input>
+                <input  placeholder="Card Number"
+                        type="text"
+                        onChange={(e) => props.captureCardNumber(e.target.value)}
+                
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="cardholderNameInput">
-                <input placeholder="Cardholder Name"></input>
+                <input  placeholder="Cardholder Name"
+                        type="text"
+                        onChange={(e) => props.captureCardHolderName(e.target.value)}                
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="expirationDateInput">
-                <input placeholder="Expiration Date"></input>
+                <input  placeholder="Expiration Date"
+                        type="text"
+                        onChange={(e) => props.captureExpirationDate(e.target.value)}                
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="cvvCodeInput">
-                <input placeholder="CVV"></input>
+                <input  placeholder="CVV"
+                        type="text"
+                        onChange={(e) => props.captureCVV(e.target.value)}                
+                ></input>
             </div>
 
 

ecom-web/src/components/checkout/ShippingAddress.js

 import React, {useState, useEffect} from 'react'
 
-export default function ShippingAddress() {
+export default function ShippingAddress(props) {
     return (
         <div id="shippingInput">
 
@@ -9,35 +9,52 @@ export default function ShippingAddress() {
             </div>
 
             <div className="shippingInfoInput" id="firstNameInput">
-                <input placeholder="First Name"></input>
+                <input  placeholder="First Name" 
+                        type="text"
+                        onChange={(e) => props.captureFirstName(e.target.value)}
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="lastNameInput">
-                <input placeholder="Last Name"></input>
+                <input  placeholder="Last Name"
+                        type="text"
+                        onChange={(e) => props.captureLastName(e.target.value)}
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="addressInput">
-                <input placeholder="Shipping Address"></input>
+                <input placeholder="Shipping Address"
+                        type="text"
+                        onChange={(e) => props.captureShippingAddress(e.target.value)}
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="aptSuiteInput">
-                <input placeholder="Apt. / Suite no"></input>
+                <input  placeholder="Apt. / Suite no"
+                        type="text"
+                        onChange={(e) => props.captureAptSuiteNo(e.target.value)}
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="cityInput">
-                <input placeholder="City"></input>
+                <input placeholder="City"
+                        type="text"
+                        onChange={(e) => props.captureCity(e.target.value)}
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="stateInput">
-                <input placeholder="State"></input>
+                <input placeholder="State"
+                        type="text"
+                        onChange={(e) => props.captureState(e.target.value)}
+                ></input>
             </div>
 
             <div className="shippingInfoInput" id="zipCodeInput">
-                <input placeholder="Postal Code"></input>
-            </div>
-
-            <div className="shippingInfoInput" id="ShippingPriorityInput">
-                <input placeholder="Shipping Priority"></input>
+                <input placeholder="Postal Code"
+                        type="text"
+                        onChange={(e) => props.captureZipCode(e.target.value)}
+                ></input>
             </div>
         </div>
     )

ecom-web/src/components/checkout/checkout.js

 import React, {useState, useEffect} from 'react'
+
 import ShippingAddress from './ShippingAddress.js'
 import PaymentMethod from './PaymentMethod.js'
 import ReviewOrder from './ReviewOrder.js'
 import SubmitOrder from './SubmitOrder.js'
 
 
-export default function checkout() {
+export default function Checkout() {
+    
+    ///////////////////////
+    // Shipping Info State
+    ///////////////////////
+    const [firstName, setFirstName] = useState([])
+    const [lastName, setLastName] = useState([])
+    const [shippingAddress, setShippingAddress] = useState([])
+    const [aptSuiteNo, setAptSuiteNo] = useState([])
+    const [city, setCity] = useState([])
+    const [state, setState] = useState([])
+    const [zipCode, setZipCode] = useState([])
+
+
+    ///////////////////////
+    // Billing Info State
+    ///////////////////////
+    const [cardNumber, setCardNumber] = useState([])
+    const [cardHolderName, setCardHolderName] = useState([])
+    const [expirationDate, setExpirationDate] = useState([])
+    const [cvv, setCVV] = useState([])
+
+
+
+    // This watches for changes on any shipping input field and prints the current states on any change
+    useEffect( () => {
+        console.log("======================================")
+        console.log("First Name: " + firstName)
+        console.log("Last Name: " + lastName)
+        console.log("Shipping Address: " + shippingAddress)
+        console.log("Apt Suite No: " + aptSuiteNo)
+        console.log("City: " + city)
+        console.log("State: " + state)
+        console.log("Zip: " + zipCode)
+    }, [firstName, lastName, shippingAddress, aptSuiteNo, city, state, zipCode])
+
+    useEffect( () => {
+        console.log("======================================")
+        console.log("Card Number: " + cardNumber)
+        console.log("Card Holder Name: " + cardHolderName)
+        console.log("Expiration Date: " + expirationDate)
+        console.log("CVV: " + cvv)
+    }, [cardNumber, cardHolderName, expirationDate, cvv])
+
+
     return (
         <div id="checkout-container">
 
-            <ShippingAddress />
+            {/* Collects User's shipping info */}
+            <ShippingAddress 
+                captureFirstName={setFirstName}
+                captureLastName={setLastName}
+                captureShippingAddress={setShippingAddress}
+                captureAptSuiteNo={setAptSuiteNo}
+                captureCity={setCity}
+                captureState={setState}
+                captureZipCode={setZipCode}
+            />
 
-            <PaymentMethod />
+            {/* Collects User's payment info */}
+            <PaymentMethod 
+                captureCardNumber={setCardNumber}
+                captureCardHolderName={setCardHolderName}
+                captureExpirationDate={setExpirationDate}
+                captureCVV={setCVV}
+            />
 
+            {/* Displays info about order. Calculates price with tax / shipping applied */}
             <ReviewOrder />
 
+            {/* Request to submit happens here, initiates input validation and sends if success */}
             <SubmitOrder />
             
         </div>