Unexpected behavior with my native react input validation

Question

I created an input field which am trying to validate

                   const [name, setName] = useState('');
                   const [formErrors, setFormErrors] = useState({});

                           <p>Name</p>
                          <input
                             placeholder="Name"
 
                             value={name}
                             onChange={(e) => setName(e.target.value)}
                          />

                       <Error> {formErrors.name}</Error>
                
                 <Button
                    onClick={handleSubmit}
                 >
                  Submit
                 </Button>

OnClick of the submit button it checks if the name field is empty in the handleSubmit function

   const validate = (values) => {
     const errors = {};
     if (!values.name) {
        errors.name = 'Name is required!';
     }
     return errors;
  };

  const handleSubmit = async (e) => {
        const val = {name};
        setFormErrors(validate(val));

         if (Object.keys(formErrors).length === 0) {
            console.log('No empty');
         }else{
             console.log('Empty');
         }

    };

The issue am having is that it lags behind in response. For example if the name field is empty it console's Not empty, on first click of the buttton, if I then click the button again it then console's the correct data which is 'Empty'.

Rodrigo Balibrera · Accepted Answer · 2022-09-12 17:30:17Z

1

This is becasue the state is not set until the component is being re-render therefore the formErrors state is {} until the handle function ends. Create a new constant to hold the errors and use these to console the outcome instead of the state itself if you still need to do something during the event, however use the state inside the JSX to render correctly since state will have been changed by then.

const handleSubmit = async (e)=>{
  const val = {name};
  const errors = validate(val)
  setFormErrors(errors);      
  if (Object.keys(errors).length === 0) {
    console.log('No empty');
  }else{
    console.log('Empty');
  }
}

answered Sep 12, 2022 at 17:30

Rodrigo Balibrera

1791 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unexpected behavior with my native react input validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related