title: React validation as well as clearing input
body: <p>I am trying to figure out the best way to run my validation for react. Right now when I submit the registration is successful but all the validation throws an error because I clear the inputs after it submits. </p>
  
  <p>What is the best way for me to still validate and clear the inputs once the form successfully submits.</p>
  
  <p>How can I either clear the inputs in my <code>function register(user)</code> so that they are not blank at submission or fix the validation to not throw errors once the form submits if there was the correct information entered?</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  import { connect } from 'react-redux';
  
  import { userActions } from '../_actions';
  
  class RegisterPage extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              user: {
                  firstName: '',
                  lastName: '',
                  username: '',
                  password: ''
              },
              submitted: false
          };
  
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      handleChange(event) {
          const { name, value } = event.target;
          const { user } = this.state;
          this.setState({
              user: {
                  ...user,
                  [name]: value
              }
          });
      }
  
      handleSubmit(event) {
          event.preventDefault();
  
          this.setState({ submitted: true,
         user: {
           firstName: '',
           lastName: '',
           username: '',
           password: ''
         }
       });
          const { user } = this.state;
          const { dispatch } = this.props;
          if (user.firstName &amp;&amp; user.lastName &amp;&amp; user.username &amp;&amp; user.password) {
              dispatch(userActions.register(user));
          }
      }
  
      render() {
          const { registering  } = this.props;
          const { user, submitted } = this.state;
          return (
              &lt;div className="col-md-6 col-md-offset-3"&gt;
                  &lt;h2&gt;Register&lt;/h2&gt;
                  &lt;form name="form" onSubmit={this.handleSubmit}&gt;
                      &lt;div className={'form-group' + (submitted &amp;&amp; !user.firstName ? ' has-error' : '')}&gt;
                          &lt;label htmlFor="firstName"&gt;Username&lt;/label&gt;
                          &lt;input type="text" className="form-control" name="firstName" value={user.firstName} onChange={this.handleChange} /&gt;
                          {submitted &amp;&amp; !user.firstName &amp;&amp;
                              &lt;div className="help-block"&gt;First Name is required&lt;/div&gt;
                          }
                      &lt;/div&gt;
                      &lt;div className={'form-group' + (submitted &amp;&amp; !user.lastName ? ' has-error' : '')}&gt;
                          &lt;label htmlFor="lastName"&gt;Password&lt;/label&gt;
                          &lt;input type="password" className="form-control" name="lastName" value={user.lastName} onChange={this.handleChange} /&gt;
                          {submitted &amp;&amp; !user.lastName &amp;&amp;
                              &lt;div className="help-block"&gt;Last Name is required&lt;/div&gt;
                          }
                      &lt;/div&gt;
                      &lt;div className={'form-group' + (submitted &amp;&amp; !user.username ? ' has-error' : '')}&gt;
                          &lt;input type="hidden" className="form-control" name="username" value={user.username = user.firstName} onChange={this.handleChange} /&gt;
                          {submitted &amp;&amp; !user.username &amp;&amp;
                              &lt;div className="help-block"&gt;Username is required&lt;/div&gt;
                          }
                      &lt;/div&gt;
                      &lt;div className={'form-group' + (submitted &amp;&amp; !user.password ? ' has-error' : '')}&gt;
                          &lt;input type="hidden" className="form-control" name="password" value={user.password} onChange={this.handleChange} /&gt;
                          {submitted &amp;&amp; !user.password &amp;&amp;
                              &lt;div className="help-block"&gt;Password is required&lt;/div&gt;
                          }
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;button className="btn btn-primary"&gt;Register&lt;/button&gt;
                          {registering &amp;&amp;
                              &lt;img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /&gt;
                          }
                        {/*  &lt;Link to="/login" className="btn btn-link"&gt;Cancel&lt;/Link&gt; */}
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      const { registering } = state.registration;
      return {
          registering
      };
  }
  
  const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
  export { connectedRegisterPage as RegisterPage };
  </code></pre>
  
  <p>user actions</p>
  
  <pre><code>function register(user) {
      return dispatch =&gt; {
          dispatch(request(user));
  
          userService.register(user)
              .then(
                  user =&gt; {
                      dispatch(success());
                    {/*  history.push('/register'); */}
                      dispatch(alertActions.success('Registration successful'));
                  },
                  error =&gt; {
                      dispatch(failure(error));
                      dispatch(alertActions.error(error));
                  }
              );
      };
  
      function request(user) { return { type: userConstants.REGISTER_REQUEST, user } }
      function success(user) { return { type: userConstants.REGISTER_SUCCESS, user } }
      function failure(error) { return { type: userConstants.REGISTER_FAILURE, error } }
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>