title: Why are my required inputs being highlighted before the user enters text?
body: <p>I am building a React component that contains a login/registration form. Which form displays is determined by the user by clicking on the relevant tab, which updates the values of <code>reg</code> and <code>log</code> in state. However, my issue is that if the user enters text into the first two inputs of either form, if they toggle to the other form, the first two inputs of that form will be highlighted red, even though the user hasn't entered anything into those inputs. I have taken some screenshots to demonstrate what I mean:</p>
  <p><a href="https://i.stack.imgur.com/lrnMxm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lrnMxm.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/zF37em.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zF37em.png" alt="enter image description here" /></a></p>
  <p>Is anybody able to explain why this is happening? It's only a small issue, but I'd like to at least understand why it's happening :)</p>
  <p>Here is the form inside the <code>render()</code> method of the component:</p>
  <pre><code>
  &lt;aside className=&quot;logReg&quot;&gt;
      &lt;ul className=&quot;tabGroup&quot;&gt;
          &lt;li className={`tab${this.state.reg ? &quot; active&quot; : &quot;&quot;}`} onClick={this.handleClick}&gt;Register&lt;/li&gt;
          &lt;li className={`tab${this.state.log ? &quot; active&quot; : &quot;&quot;}`} onClick={this.handleClick}&gt;Login&lt;/li&gt;
      &lt;/ul&gt;
      {this.state.reg ?
          &lt;form className=&quot;form&quot; id=&quot;register&quot; /&gt;
              &lt;label className=&quot;label&quot;&gt;Full Name&lt;/label&gt;
              &lt;input className=&quot;input&quot; type=&quot;text&quot; onChange={ this.handleRegName } value={ this.state.register.name } required/&gt;
  
              &lt;label className=&quot;label&quot;&gt;Email&lt;/label&gt;
              &lt;input className=&quot;input&quot; type=&quot;email&quot; onChange={ this.handleRegEmail } value={ this.state.register.email } required/&gt;
  
              &lt;label className=&quot;label&quot;&gt;Password&lt;/label&gt;
              &lt;input className=&quot;input&quot; type=&quot;password&quot; onChange={ this.handleRegPass } value={ this.state.register.pass } required/&gt;
  
              &lt;label className=&quot;label&quot;&gt;Password Confirmation&lt;/label&gt;
              &lt;input className=&quot;input&quot; type=&quot;password&quot; onChange={ this.handleRegConf } value={ this.state.register.conf } required/&gt;
  
              &lt;button className=&quot;formButton&quot; type=&quot;submit&quot;&gt;Register&lt;/button&gt;
          &lt;/form&gt;
      :
          &lt;form className=&quot;form&quot; id=&quot;login&quot; &gt;
              &lt;label className=&quot;label&quot;&gt;Email&lt;/label&gt;
              &lt;input className=&quot;input&quot; type=&quot;email&quot; onChange={ this.handleLogEmail } value={ this.state.login.email } required/&gt;
  
              &lt;label className=&quot;label&quot;&gt;Password&lt;/label&gt;
              &lt;input className=&quot;input&quot; type=&quot;password&quot; onChange={ this.handleLogPass } value={ this.state.login.pass } required/&gt;
  
              &lt;button className=&quot;formButton&quot; type=&quot;submit&quot;&gt;Login&lt;/button&gt;
          &lt;/form&gt;
      }
  &lt;/aside&gt;
  </code></pre>
  <p>This is the structure of my state:</p>
  <pre><code>        this.state = {
              reg: true,
              register: {
                  name: &quot;&quot;,
                  email: &quot;&quot;,
                  pass: &quot;&quot;,
                  conf: &quot;&quot;
              },
              log: false,
              login: {
                  email: &quot;&quot;,
                  pass: &quot;&quot;
              }
          }
  </code></pre>
  <p>Here are a couple of my methods (all of the <code>handleRegEmail</code>/<code>handleLogName</code> etc. follow the same structure as <code>handleRegName(e)</code> below):</p>
  <pre><code>    handleClick(){
          let currentReg = this.state.reg;
          let currentLog = this.state.log;
          this.setState({
              reg: !currentReg,
              log: !currentLog
          })
      }
  
      handleRegName(e){
          let registerCopy = JSON.parse(JSON.stringify(this.state.register));
          registerCopy.name = e.currentTarget.value;
          this.setState({ 
              register: registerCopy
          });
      }
  </code></pre>