title: React updating state in two input fields from form submission
body: <p>I am trying to make a simple contact form using React.  Eventually I will send the data collected from the state to a database, but for right now I am trying to just get it to console log the correct values.</p>
  
  <p>Right now, the email field overrides the name field and when I console log both states, name shows up and email is undefined.  Here is my React Component</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import ContactData from '../data/ContactData.js';
  
  
  class FormContact extends Component {
      constructor(props) {
          super(props)
          this.state = {
              name: '',
              email: '',
              textArea: ''
          }
      }
  
      handleChange(event) {
          event.preventDefault();
          this.setState({
              name: event.target.value,
              email: event.target.email
          })
      }
  
      handleSubmit(event) {
          event.preventDefault();
          console.log(this.state.name + ' ' + this.state.email);
      }
  
      render() {
          return (
              &lt;form onSubmit={this.handleSubmit.bind(this)}&gt;
                  &lt;label&gt; Name:
                      &lt;input type="text" placeholder="Name" value={this.state.name} onChange={this.handleChange.bind(this)} /&gt;
                  &lt;/label&gt;&lt;br /&gt;
                  &lt;label&gt; Email:
                      &lt;input type="text" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this)}/&gt;
                  &lt;/label&gt;&lt;br /&gt;
                      &lt;input className="btn btn-primary" type="submit" value="Submit" /&gt;
             &lt;/form&gt;
          )
      }
  }
  
  FormContact.PropTypes = {
      subName: PropTypes.string,
      subEmail: PropTypes.string
  }
  
  FormContact.defaultProps = {
      subName: 'Sam',
      subEmail: ''
  }
  
  class Contact extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;CONTACT PAGE&lt;/h1&gt;
                  &lt;FormContact /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  export default Contact;
  </code></pre>