Checkout Part 2

Checkout.js

////////////////////////////////////////////////////////////////////////////////
// Exercise
//
// - When the checkbox is checked:
//   5- Fill in the shipping fields with the values from billing
//   6- Disable the shipping fields so they are not directly editable
//   7- Keep the shipping fields up to date as billing fields change
//   - Hint: you can get the checkbox value from `event.target.checked`
// - When the form submits, console.log the values
//
// Got extra time?
//
// - If there are more than two characters in the "state" field, let the user
//   know they should use the two-character abbreviation
// - If the user types something into shipping, then checks the checkbox, then
//   unchecks the checkbox, ensure the field has the information from
//   before clicking the checkbox the first time

//1. Capture vaules of billing name and billing state
//2. is the check boxed marked true or false??
//3. Can I stick those values that I captured onto the DOM, like the text, remember?

import React, { Component } from "react";

class CheckoutForm extends Component {
  state = {
    billingName: "",
    billingState: "",
    sameAsCheckBox: false
  };
  onHandleSubmit = event => {
    event.preventDefault();
    console.log("SUBMIT");
  };

  handleInputChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  handleCheckbox = event => {
    this.setState({
      sameAsCheckBox: event.target.checked
    });
  };

  render() {
    return (
      <div>
        <h1>Checkout</h1>
        <form onSubmit={this.onHandleSubmit}>
          <fieldset>
            <legend>Billing Address</legend>
            <p>
              <label>
                Billing Name:{" "}
                <input
                  name="billingName"
                  onChange={this.handleInputChange}
                  value={this.state.billingName}
                  type="text"
                />
              </label>
            </p>
            <p>
              <label>
                Billing State:{" "}
                <input
                  type="text"
                  name="billingState"
                  onChange={this.handleInputChange}
                  value={this.state.billingState}
                  size="2"
                />
              </label>
            </p>
          </fieldset>

          <br />

          <fieldset>
            <label>
              <input
                value={this.state.sameAsCheckBox}
                onChange={this.handleCheckbox}
                type="checkbox"
              />{" "}
              Same as billing
            </label>
            <legend>Shipping Address</legend>
            <p>
              <label>
                Shipping Name: <input type="text" />
              </label>
            </p>
            <p>
              <label>
                Shipping State: <input type="text" size="2" />
              </label>
            </p>
          </fieldset>

          <p>
            <button>Submit</button>
          </p>
        </form>
      </div>
    );
  }
}

export default CheckoutForm;