title: ReactJS - using onBlur to validate email field
body: <p>I have a MaterialUI Textfield for email which validates input when the user leaves the field. I make use of a function on onBlur for that purpose.  I want to show an error message using helpertext. </p>
  
  <p>The code for email field:</p>
  
  <pre><code>&lt;TextField
      margin="dense"
      id="emailAddress"
      name="email"
      label="email"
      type="email"
      onChange={onChange}
      onBlur={validateEmail}
      value={email}
      error={validEmail}
      helperText={validEmail ? 'Please enter a valid Email' : ' '}
      fullWidth
   /&gt;
  </code></pre>
  
  <p>The validEmail variable is initialized inside the functional component as follows: </p>
  
  <pre><code>let validEmail = false;
  </code></pre>
  
  <p>And validateEmail is defined inside the same component as:</p>
  
  <pre><code>const validateEmail = () =&gt; {
      if (!email || invalidEmail(email)) {
        validEmail = true;
      } else {
        validEmail = false;
      }
  };
  </code></pre>
  
  <p>But it doesn't work and error message doesn't get displayed. What am I potentially missing here? The condition that checks invalidEmail does get executed. </p>