title: Simplest way to validate forms in react
body: <p>I'm quite unsure how to do a form validation within react. </p>
  
  <p>I want to display an error message on the current page saying. However, the password validation is ignored so their is no error that shows on the page. </p>
  
  <p>Password must be at least characters </p>
  
  <p>Maybe i'm not using <a href="https://reactjs.org/docs/conditional-rendering.html" rel="nofollow noreferrer">conditional rendering</a> right </p>
  
  <p><strong>SignUp.js</strong> (snippet for demonstration purpose)</p>
  
  <pre><code>constructor(props){
   super(props);
  
   this.state ={
    errors: {},
  }
  
  handleSubmit(event) {
    event.preventDefault();
  
    const email = this.email.value;
    const password = this.password.value;
  
    if(password.length &gt; 6){
      this.state.errors.password= "Password must be at least 6 characters";
    }
    const creds = {email, password}
  
    if(creds){
      this.props.signUp(creds);
      this.props.history.push('/');
  
    }
  }
  
  render() {
   return (
    &lt;div className="container"&gt;
      &lt;div className="row"&gt;
        &lt;div className="col-md-6"&gt;
          &lt;h1&gt;Sign Up&lt;/h1&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;div className="form-group"&gt;
              &lt;label htmlFor="exampleInputEmail1"&gt;Email address&lt;/label&gt;
  
              &lt;input
                name="email"
                type="email"          
                className="form-control"
                id="email"
                ref={(input) =&gt; this.email = input}
                aria-describedby="emailHelp"
                placeholder="Enter email" /&gt;
              &lt;small id="emailHelp" className="form-text text-muted"&gt;We'll never share your email with anyone else.&lt;/small&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;label htmlFor="exampleInputPassword1"&gt;Password&lt;/label&gt;
              {this.password &gt; 6 &amp;&amp;
                 //display an error here
                &lt;h2&gt;{this.state.errors.password}&lt;/h2&gt;
              }
              &lt;input
                name="password"
                type="password"
                ref={(input) =&gt; this.password = input}
                value={this.state.password}
                className="form-control"
                id="password"    
                placeholder="Password" /&gt;
  
            &lt;/div&gt;
  
  
  
            &lt;button type="submit" className="btn btn-primary"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    );
   }
  
  } 
  </code></pre>