title: Issue updating the state in react
body: <p>In my Login component, I am trying to validate the user input and set the errors using React state, but I am facing issue updating the <code>errorState</code>.</p>
  <p>Here's my Login component</p>
  <pre class="lang-js prettyprint-override"><code>const Login = () =&gt; {
      const [state, setState] = React.useState({email: '', password: ''});
  
      const initialErrorState = {emailError: '', passwordError: ''};
      const [errorState, setErrorState] = React.useState(initialErrorState);
  
      const handleChange = (e, {name, value}) =&gt; {
          setState({...state, [name]: value});
      }
  
      const validate = () =&gt; {
          const emailRegEx = /^(([^&lt;&gt;()[\]\\.,;:\s@&quot;]+(\.[^&lt;&gt;()[\]\\.,;:\s@&quot;]+)*)|(&quot;.+&quot;))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  
          state.email === '' ? setErrorState({...errorState, emailError: &quot;Email is required&quot;}) :
              !state.email.match(emailRegEx) ? setErrorState({...errorState, emailError: &quot;Email is invalid&quot;}) :
              setErrorState({...errorState, emailError: ''});
  
          state.password === '' ? setErrorState({...errorState, passwordError: 'Password is required'}) :
          setErrorState({...errorState, passwordError: ''});
      }
  
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
  
          validate();
          console.log(errorState);
  
          if (!(JSON.stringify(errorState) === JSON.stringify(initialErrorState)))
              return;
  
          //  console.log(state);
      }
  
      return (
          &lt;Container&gt;
              &lt;h1&gt;Login&lt;/h1&gt;
              &lt;Form onSubmit={handleSubmit}&gt;
                  &lt;Form.Input 
                      label=&quot;Email&quot;
                      placeholder=&quot;example@gmail.com&quot;
                      name=&quot;email&quot;
                      onChange={handleChange}
                      error={errorState.emailError ? errorState.emailError : null}
                  /&gt;
                  &lt;Form.Input 
                      label=&quot;Password&quot;
                      type=&quot;password&quot;
                      name=&quot;password&quot;
                      onChange={handleChange}
                      error={errorState.passwordError ? errorState.passwordError : null}
                  /&gt;
                  &lt;Form.Button 
                      type=&quot;submit&quot;
                      content=&quot;Login&quot;
                  /&gt;
              &lt;/Form&gt;
          &lt;/Container&gt;
      );
  };
  </code></pre>
  <p>Calling <code>validate()</code> function do not set the <code>emailError</code> in my <code>errorState</code>. It only sets <code>passwordError</code>. Console logging <code>errorState</code> after calling <code>validate()</code> function gives following.<br />
  <em>Deliberately keeping email and password fields empty and pressing login button multiple times</em></p>
  <pre><code>{emailError: '', passwordError: ''}
  Login.js:29 {emailError: '', passwordError: 'Password is required'}
  Login.js:29 {emailError: '', passwordError: 'Password is required'}
  Login.js:29 {emailError: '', passwordError: 'Password is required'}
  Login.js:29 {emailError: '', passwordError: 'Password is required'}
  </code></pre>
  <p>If I modify the validate function to following <br />
  <em>Placing password validation above the email validation</em></p>
  <pre class="lang-js prettyprint-override"><code>const validate = () =&gt; {
          const emailRegEx = /^(([^&lt;&gt;()[\]\\.,;:\s@&quot;]+(\.[^&lt;&gt;()[\]\\.,;:\s@&quot;]+)*)|(&quot;.+&quot;))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  
          state.password === '' ? setErrorState({...errorState, passwordError: 'Password is required'}) :
          setErrorState({...errorState, passwordError: ''});
  
          state.email === '' ? setErrorState({...errorState, emailError: &quot;Email is required&quot;}) :
              !state.email.match(emailRegEx) ? setErrorState({...errorState, emailError: &quot;Email is invalid&quot;}) :
              setErrorState({...errorState, emailError: ''});
      }
  </code></pre>
  <p>This time my <code>emailError</code> is set but <code>passwordError</code> is not set. Console logging <code>errorState</code> after calling <code>validate()</code> function gives following.<br />
  <em>Again deliberately keeping email and password fields empty and pressing login button multiple times</em></p>
  <pre><code>{emailError: '', passwordError: ''}
  Login.js:29 {emailError: 'Email is required', passwordError: ''}
  Login.js:29 {emailError: 'Email is required', passwordError: ''}
  Login.js:29 {emailError: 'Email is required', passwordError: ''}
  </code></pre>
  <p>Can anyone help me understanding why this is happening? why both properties of my <code>errorState</code> object are not setting?</p>