title: How to get form data from input fields in React
body: <p>The constructor and function:</p>
  
  <pre><code>constructor(props) {
      super(props);
  
      this.state = {
          tagline: 'We rank what people are talking about.',
          year: new Date().getFullYear()
      };
  
      this.onFormSubmit = this.onFormSubmit.bind(this);
  }
  
  onFormSubmit(e) {
      console.log('onFormSubmit', e)
      console.log('this.state', this.state);
  };
  </code></pre>
  
  <p>The form (classNames removed for clarity):</p>
  
  <pre><code>&lt;form onSubmit={ this.onFormSubmit }&gt;
      &lt;div className="fl w100"&gt;
          &lt;div&gt;
              &lt;input type="text" id="email" value={ this.state.email }/&gt;
              &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div className="fl w100"&gt;
          &lt;div&gt;
              &lt;input type="password" id="password" value={ this.state.password }/&gt;
              &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;button type="submit"&gt;
          Login
      &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is what logs out, note no email or password information:<a href="https://i.stack.imgur.com/uK2eG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uK2eG.png" alt="enter image description here"></a></p>
  
  <p>Full Login component code</p>
  
  <hr>
  
  <pre><code>import React from 'react';
  
  class Login extends React.Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              tagline: 'We rank what people are talking about.',
              year: new Date().getFullYear()
          };
  
          this.onFormSubmit = this.onFormSubmit.bind(this);
      }
  
      onFormSubmit(e) {
          console.log('onFormSubmit', e)
          console.log('this.state', this.state);
      };
  
      render() {
          return (&lt;div className="app"&gt;
              &lt;div className="welcome"&gt;
                  &lt;header&gt;
                      &lt;div className="wikitags-logo"&gt;
                          &lt;img src="imgs/wikitags-logo.png"/&gt;
                      &lt;/div&gt;
                      &lt;h2&gt;Admin Portal&lt;/h2&gt;
                      &lt;p&gt;{ this.state.tagline }&lt;/p&gt;
                  &lt;/header&gt;
  
                  &lt;section className="login-form"&gt;
                      &lt;form onSubmit={ this.onFormSubmit }&gt;
                          &lt;div className="fl w100"&gt;
                              &lt;div className="mdl-textfield mdl-js-textfield"&gt;
                                  &lt;input className="mdl-textfield__input" type="text" id="email" value={ this.state.email }/&gt;
                                  &lt;label className="mdl-textfield__label" htmlFor="email"&gt;Email&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className="fl w100"&gt;
                              &lt;div className="mdl-textfield mdl-js-textfield"&gt;
                                  &lt;input className="mdl-textfield__input" type="password" id="password" value={ this.state.password }/&gt;
                                  &lt;label className="mdl-textfield__label" htmlFor="password"&gt;Password&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;button type="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"&gt;
                              Login
                          &lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/section&gt;
  
                  &lt;footer&gt;
                      &amp;copy; { this.state.year } WikiTags
                  &lt;/footer&gt;
              &lt;/div&gt;
          &lt;/div&gt;);
      }
  }
  
  export default Login;
  </code></pre>