title: react enable button after all form fields are not empty
body: <p>hey guys new to react trying to achieve some simply validation but struggling. i want to</p>
  
  <ul>
  <li>disable button if form fields are empty</li>
  <li><strong>enable button if ALL form fields are filled</strong></li>
  </ul>
  
  <p>i want to do all of this on the fly but been struggling/ cant find anything solid for a reference. here is my code</p>
  
  <pre><code>import React from 'react';
  //import ReactDOM from 'react-dom';
  import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
  
  export default class Forms extends React.Component {
    constructor() {
      super();
      this.state = {
        fname: '',
        lname: '',
        email: '',
        password: '',
        confirmPassword: '',
        formSuccess: false
      }
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleUserInput(e) {
      const name = e.target.name;
      const value = e.target.value;
      this.setState({ [name]: value });
    }
  
    handleSubmit(e) {
      e.preventDefault();
    }
  
    render() {
      return (
        &lt;Form onSubmit={this.handleSubmit}&gt;
          &lt;FormGroup&gt;
            &lt;Label for="fname"&gt;First Name&lt;/Label&gt;
            &lt;Input
              value={this.state.fname}
              onChange={(event) =&gt; this.handleUserInput(event)}
              type="text"
              name="fname"
              id="fname"
              placeholder="first name"
            /&gt;
          &lt;/FormGroup&gt;
          &lt;FormGroup&gt;
            &lt;Label for="lname"&gt;Last Name&lt;/Label&gt;
            &lt;Input
              onChange={(event) =&gt; this.handleUserInput(event)}
              value={this.state.lname}
              type="text"
              name="lname"
              id="lname"
              placeholder="last name"
            /&gt;
          &lt;/FormGroup&gt;
          &lt;FormGroup&gt;
            &lt;Label for="email"&gt;Email&lt;/Label&gt;
            &lt;Input
              onChange={(event) =&gt; this.handleUserInput(event)}
              value={this.state.email}
              type="email"
              name="email"
              id="email"
              placeholder="email"
            /&gt;
          &lt;/FormGroup&gt;
          &lt;FormGroup&gt;
            &lt;Label for="password"&gt;Password&lt;/Label&gt;
            &lt;Input
              onChange={(event) =&gt; this.handleUserInput(event)}
              type="password"
              value={this.state.password}
              name="password"
              id="password"
              placeholder="password"
            /&gt;
          &lt;/FormGroup&gt;
          &lt;FormGroup&gt;
            &lt;Label for="confirmPassword"&gt;Confirm Password&lt;/Label&gt;
            &lt;Input
              onChange={(event) =&gt; this.handleUserInput(event)}
              value={this.state.confirmPassword}
              type="password"
              name="confirmPassword"
              id="confirmPassword"
              placeholder="confirm password"
            /&gt;
          &lt;/FormGroup&gt;
          &lt;FormGroup check&gt;
            &lt;Label check&gt;
              &lt;Input type="checkbox" /&gt;{' '}
              Check me out
          &lt;/Label&gt;
          &lt;/FormGroup&gt;
          &lt;Button color="primary" size="lg" disabled={!this.state.formSuccess}&gt;Submit&lt;/Button&gt;
        &lt;/Form&gt;
      )
    }
  }
  </code></pre>
  
  <p>thanks for all the help</p>