title: React - Add Class to Empty Input Fields
body: <p>I want to add a red border only if an input is empty. I couldn't find a way to "addClass" in React so I'm using state. Right now the code will add red border to all inputs, even if it has text.</p>
  
  <p>State:</p>
  
  <pre><code>this.state = {
    inputBorderError: false,
  };
  </code></pre>
  
  <p>HTML/JSX:</p>
  
  <pre><code>&lt;label&gt;Name&lt;/label&gt;
  &lt;input className={
    this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
  } /&gt;
  
  &lt;label&gt;Email&lt;/label&gt;
  &lt;input className={
    this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
  } /&gt;
  
  &lt;label&gt;Message&lt;/label&gt;
  &lt;textarea className={
    this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
  } /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.form-input-fail {
    border: 1px solid red;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>   let inputFields = document.getElementsByClassName('form-input');
  
     for (var i = 0; i &lt; inputFields.length; i++) {
        if (inputFields[i].value === '') {
          this.setState({
            inputBorderError: true,
          });
        }
      }
  </code></pre>
  
  <p>I see the error in my code as it's basically setting the state to true anytime it finds an empty input. I think I may be approaching this incorrectly as there's only one state. Is there a solution based on my state approach, or is there another solution? </p>