title: Form validation React function component with useState
body: <p>I am working on the client-side validation form with React using a component function and useState. the problem is that when I click submit, the handleSubmit updates the &quot;validation&quot; states with the errors, but they are not render when the state changes. they are rendered only when I input some values on the input fields. How could I fix this?</p>
  <p>bellow you can find the code:</p>
  <pre><code>import React, { useState } from 'react';
  
  function RegistrationView() {
    const [inputValues, setInputValue] = useState({
      fName: '',
      lName: '',
      email: '',
      password: '',
      confirmPassword: '',
    });
  
    const [validation, setValidation] = useState({
      fName: '',
      lName: '',
      email: '',
      password: '',
      confirmPassword: '',
    });
  
    //handle submit updates
    function handleChange(event) {
      const { name, value } = event.target;
      setInputValue({ ...inputValues, [name]: value });
    }
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      let errors = validation;
  
      //first Name validation
      if (!inputValues.fName.trim()) {
        errors.fName = 'First name is required';
      } else {
        errors.fName = '';
      }
      //last Name validation
      if (!inputValues.lName.trim()) {
        errors.lName = 'Last name is required';
      } else {
        errors.lName = '';
      }
  
      // email validation
      const emailCond =
        &quot;/^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/&quot;;
      if (!inputValues.email.trim()) {
        errors.email = 'Email is required';
      } else if (!inputValues.email.match(emailCond)) {
        errors.email = 'Please ingress a valid email address';
      } else {
        errors.email = '';
      }
  
      //password validation
      const cond1 = '/^(?=.*[a-z]).{6,20}$/';
      const cond2 = '/^(?=.*[A-Z]).{6,20}$/';
      const cond3 = '/^(?=.*[0-9]).{6,20}$/';
      const password = inputValues.password;
      if (!password) {
        errors.password = 'password is required';
      } else if (password.length &lt; 6) {
        errors.password = 'Password must be longer than 6 characters';
      } else if (password.length &gt;= 20) {
        errors.password = 'Password must shorter than 20 characters';
      } else if (!password.match(cond1)) {
        errors.password = 'Password must contain at least one lowercase';
      } else if (!password.match(cond2)) {
        errors.password = 'Password must contain at least one capital letter';
      } else if (!password.match(cond3)) {
        errors.password = 'Password must contain at least a number';
      } else {
        errors.password = '';
      }
  
      //matchPassword validation
      if (!inputValues.confirmPassword) {
        errors.confirmPassword = 'Password confirmation is required';
      } else if (inputValues.confirmPassword !== inputValues.Password) {
        errors.confirmPassword = 'Password does not match confirmation password';
      } else {
        errors.password = '';
      }
  
      return setValidation(errors);
    };
  
    return (
      &lt;div&gt;
        &lt;div className='sign-up-form'&gt;
          &lt;form
            id='registrationForm'
            action='/'
            method='POST'
            onSubmit={handleSubmit}
          &gt;
            &lt;div className='form-control'&gt;
              &lt;input
                placeholder='First Name'
                type='string'
                name='fName'
                id='fName'
                className='input-field'
                onChange={(e) =&gt; handleChange(e)}
                value={inputValues.fName}
              /&gt;
              {validation.fName &amp;&amp; &lt;p&gt;{validation.fName}&lt;/p&gt;}
              {validation.fName &amp;&amp; console.log(validation)}
            &lt;/div&gt;
            &lt;div className='form-control'&gt;
              &lt;input
                placeholder='Last Name'
                type='string'
                id='lName'
                name='lName'
                className='input-field'
                onChange={(e) =&gt; handleChange(e)}
                value={inputValues.lName}
              /&gt;
              {validation.lName &amp;&amp; &lt;p&gt;{validation.lName}&lt;/p&gt;}
            &lt;/div&gt;
            &lt;div className='form-control'&gt;
              &lt;input
                placeholder='email'
                type='email'
                name='email'
                className='input-field'
                onChange={(e) =&gt; handleChange(e)}
                value={inputValues.email}
              /&gt;
            &lt;/div&gt;
            {validation.email &amp;&amp; &lt;p&gt;{validation.email}&lt;/p&gt;}
  
            &lt;div className='form-control'&gt;
              &lt;input
                placeholder='password'
                type='password'
                name='password'
                className='input-field'
                onChange={(e) =&gt; handleChange(e)}
                value={inputValues.password}
                required
              /&gt;
              {validation.password &amp;&amp; &lt;p&gt;{validation.password}&lt;/p&gt;}
            &lt;/div&gt;
            &lt;div className='form-control'&gt;
              &lt;input
                placeholder='confirm password'
                type='password'
                name='confirmPassword'
                className='input-field'
                onChange={(e) =&gt; handleChange(e)}
                value={inputValues.confirmPassword}
                required
              /&gt;
            &lt;/div&gt;
            &lt;button type='submit' id='submit-button'&gt;
              submit
            &lt;/button&gt;
            &lt;span className='form-input-login'&gt;
              Already have an account? Login &lt;a href='#'&gt;here&lt;/a&gt;
            &lt;/span&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default RegistrationView;
  </code></pre>
  <p>thanks</p>