title: Reactjs submit form and setState not working first time
body: <p>I have a submit action for my form which basically validates on submit.</p>
  
  <p>It is working as i expect because when i submit the form it renders the errors. But the issue occurs when i do the submit i do not want to do the ajax request as the form is invalid. I notice that on the first submit the emailError is not set (default) but the second submit the state contains the correct emailError set to true.</p>
  
  <p>I understand from the react docs that setState is not available immeditely as it is pending.</p>
  
  <p>How can i get around this issue?</p>
  
  <p>My code is below</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import isEmail from 'validator/lib/isEmail';
  
  class formExample extends Component
  {
      constructor(props) {
          super(props);
  
          this.state = {
              email: '',
              emailError: false
          };
  
          this.register = this.register.bind(this);
          this.updateState = this.updateState.bind(this);
      }
  
      updateState(e) {
          this.setState({ email: e.target.value });
      }
  
      validateEmail() {
          if (!isEmail(this.state.email)) {
            console.log("setting state");
              this.setState({ emailError: true });
              return;
          }
          console.log(this.state);
          this.setState({ emailError: false });
      }
  
      register(event) {
          event.preventDefault();
  
              this.validateEmail();
  
              //only if valid email then submit further
      }
  
      render() {
          return (
                &lt;div className="row"&gt;
                  &lt;div className="col-md-2 col-md-offset-4"&gt;&lt;/div&gt;
                  &lt;div className="col-lg-6 col-lg-offset-3"&gt;
                    &lt;form role="form" id="subscribe" onSubmit={this.register}&gt;
                      &lt;div className="form-group"&gt;
                          &lt;input type="text" className="form-control" placeholder="Email..." name="email" value={this.state.email} onChange={this.updateState} /&gt;
                          &lt;div className="errorMessage"&gt;
                              {this.state.emailError ? 'Email address is invalid' : ''}
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="input-group input-group-md inputPadding"&gt;
                          &lt;span className="input-group-btn"&gt;
                              &lt;button className="btn btn-success btn-lg" type="submit"&gt;
                              Submit
                              &lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
          );
      }
  }
  
  export default formExample;
  </code></pre>