text: // react forms docs
  
  // => 1. controlled components
  //  - we write forms as controlled components.
  /*
  class NameForm extends React.Component {
    constructor(props) {
      super(props);
      // the value state is initially empty
      this.state = {value: ''};
      //  we bind 2 methods handleChange and handleSubmit
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
      );
    }
  }
  
  */
  
  
  // ##############################################
  // Forms with value and names (controlled state)
  
  /*
  import React, {Component} from "react"
  
  class App extends Component {
      constructor() {
          super()
          this.state = {
              firstName: "",
              lastName: ""
          }
          this.handleChange = this.handleChange.bind(this)
      }
      
      handleChange(event) {
          const {name, value} = event.target
          this.setState({
              [name]: value
          })
      }
      
      render() {
          return (
              <form>
                  <input 
                      type="text" 
                      value={this.state.firstName} 
                      name="firstName" 
                      placeholder="First Name" 
                      onChange={this.handleChange} 
                  />
                  <br />
                  <input 
                      type="text" 
                      value={this.state.lastName} 
                      name="lastName" 
                      placeholder="Last Name" 
                      onChange={this.handleChange} 
                  />
                  
                  {
                      /**
                       * Other useful form elements:
                       * 
                       *  <textarea /> element
                       *  <input type="checkbox" />
                       *  <input type="radio" />
                       *  <select> and <option> elements
                       
                  }
                  
                  
                  
                  
                  
                  
                  
                  
                  <h1>{this.state.firstName} {this.state.lastName}</h1>
              </form>
          )
      }
  }
  
  export default App
  
  */
  
  // Additional Form handling.....
  // ###################################
  /*
  import React, {Component} from "react"
  
  class App extends Component {
      constructor() {
          super()
          this.state = {
              firstName: "",
              lastName: "",
              isFriendly: false,
              gender: "",
              favColor: "blue"
          }
          this.handleChange = this.handleChange.bind(this)
      }
      
      handleChange(event) {
          const {name, value, type, checked} = event.target
          type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
      }
      
      render() {
          return (
              <form onSubmit={this.handleSubmit}>
                  <input 
                      type="text" 
                      value={this.state.firstName} 
                      name="firstName" 
                      placeholder="First Name" 
                      onChange={this.handleChange} 
                  />
                  <br />
                  <input 
                      type="text" 
                      value={this.state.lastName} 
                      name="lastName" 
                      placeholder="Last Name" 
                      onChange={this.handleChange} 
                  />
                  
                  {
                      /*
                       * Other useful form elements:
                       * 
                       *  <textarea /> element
                       *  <input type="checkbox" />
                       *  <input type="radio" />
                       *  <select> and <option> elements
                       
                  }
                  
                  <textarea 
                      value={"Some default value"}
                      onChange={this.handleChange}
                  />
                  
                  <br />
                  
                  <label>
                      <input 
                          type="checkbox" 
                          name="isFriendly"
                          checked={this.state.isFriendly}
                          onChange={this.handleChange}
                      /> Is friendly?
                  </label>
                  <br />
                  <label>
                      <input 
                          type="radio" 
                          name="gender"
                          value="male"
                          checked={this.state.gender === "male"}
                          onChange={this.handleChange}
                      /> Male
                  </label>
                  <br />
                  <label>
                      <input 
                          type="radio" 
                          name="gender"
                          value="female"
                          checked={this.state.gender === "female"}
                          onChange={this.handleChange}
                      /> Female
                  </label>
             
                  <br />
                  
                  <label>Favorite Color:</label>
                  <select 
                      value={this.state.favColor}
                      onChange={this.handleChange}
                      name="favColor"
                  >
                      <option value="blue">Blue</option>
                      <option value="green">Green</option>
                      <option value="red">Red</option>
                      <option value="orange">Orange</option>
                      <option value="yellow">Yellow</option>
                  </select>
                  
                  <h1>{this.state.firstName} {this.state.lastName}</h1>
                  <h2>You are a {this.state.gender}</h2>
                  <h2>Your favorite color is {this.state.favColor}</h2>
  				<button>Submit</button>
              </form>
          )
      }
  }
  
  export default App
  
  */
  
  
  
  /*
  
  // => FORMS IMPROVED AND MORE DETAILED.
  
  import React, {Component} from "react"
  
  /*
   * Challenge: Wire up the partially-finished travel form so that it works!
   * Remember to use the concept of controlled forms
   * https://reactjs.org/docs/forms.html
   * 
   * All information should be populating the text below the form in real-time
   * as you're filling it out
   * 
   * This exercise is adapted from the V School curriculum on vanilla JS forms:
   * https://coursework.vschool.io/travel-form/
   * 
   * All of our challenges and learning resources are open for the public
   * to play around with and learn from at https://coursework.vschool.io
   
  
  /*
  
  class App extends Component {
      constructor() {
          super()
          this.state = {
              firstName: "",
              lastName: "",
              age: "",
              gender: "",
              destination: "",
              isVegan: false,
              isKosher: false,
              isLactoseFree: false
          }
          this.handleChange = this.handleChange.bind(this)
      }
      
      handleChange(event) {
          const {name, value, type, checked} = event.target
          type === "checkbox" ? 
              this.setState({
                  [name]: checked
              })
          :
          this.setState({
              [name]: value
          }) 
      }
      
      render() {
          return (
              <main>
                  <form>
                      <input 
                          name="firstName" 
                          value={this.state.firstName} 
                          onChange={this.handleChange} 
                          placeholder="First Name" 
                      />
                      <br />
                      
                      <input 
                          name="lastName" 
                          value={this.state.lastName}
                          onChange={this.handleChange} 
                          placeholder="Last Name" 
                      />
                      <br />
                      
                      <input 
                          name="age" 
                          value={this.state.age}
                          onChange={this.handleChange} 
                          placeholder="Age" 
                      />
                      <br />
                      
                      <label>
                          <input 
                              type="radio" 
                              name="gender"
                              value="male"
                              checked={this.state.gender === "male"}
                              onChange={this.handleChange}
                          /> Male
                      </label>
                      
                      <br />
                      
                      <label>
                          <input 
                              type="radio" 
                              name="gender"
                              value="female"
                              checked={this.state.gender === "female"}
                              onChange={this.handleChange}
                          /> Female
                      </label>
                      
                      <br />
                      
                      <select 
                          value={this.state.destination} 
                          name="destination" 
                          onChange={this.handleChange}
                      >
                          <option value="">-- Please Choose a destination --</option>
                          <option value="germany">Germany</option>
                          <option value="norway">Norway</option>
                          <option value="north pole">North Pole</option>
                          <option value="south pole">South Pole</option>
                      </select>
                      
                      <br />
                      
                      <label>
                          <input 
                              type="checkbox"
                              name="isVegan"
                              onChange={this.handleChange}
                              checked={this.state.isVegan}
                          /> Vegan?
                      </label>
                      <br />
                      
                      <label>
                          <input 
                              type="checkbox"
                              name="isKosher"
                              onChange={this.handleChange}
                              checked={this.state.isKosher}
                          /> Kosher?
                      </label>
                      <br />
                      
                      <label>
                          <input 
                              type="checkbox"
                              name="isLactoseFree"
                              onChange={this.handleChange}
                              checked={this.state.isLactoseFree}
                          /> Lactose Free?
                      </label>
                      <br />
                      
                      <button>Submit</button>
                  </form>
                  <hr />
                  <h2>Entered information:</h2>
                  <p>Your name: {this.state.firstName} {this.state.lastName}</p>
                  <p>Your age: {this.state.age}</p>
                  <p>Your gender: {this.state.gender}</p>
                  <p>Your destination: {this.state.destination}</p>
                  <p>Your dietary restrictions:</p>
                  
                  <p>Vegan: {this.state.isVegan ? "Yes" : "No"}</p>
                  <p>Kosher: {this.state.isKosher ? "Yes" : "No"}</p>
                  <p>Lactose Free: {this.state.isLactoseFree ? "Yes" : "No"}</p>
                  
              </main>
          )
      }
  }
  
  export default App
  
  */