reactjs - useState Hook not updating properly

Question

my useState hook is not updating properly, it is not able to take 2 values at a time ex:- my useState hook is

const [error, setError] = useState({
    empty: "",
    length: "",
  });

 const submitHandler = (e) => {
    e.preventDefault();
    if (email == "" || password == "")
      setError({ ...error, length: "no lengthy values" });
    if (email.length < 3) {
      setError({ ...error, empty: "no empty values" });
    }

setError updates only one out of 2 condition, same happened with useState array too, useState unable to update/push multiple data at a time , any answers would be highly appreciatable. Thank You

question from:https://stackoverflow.com/questions/65896518/usestate-hook-not-updating-properly

Answer 1

While you could use a callback instead, eg:

setError(error => ({ ...error, empty: "no empty values" }));

I think setting the state once would make a bit more sense. If a test doesn't generate an error, set the associated property to the empty string:

setError({
  length: email === "" || password === "" ? 'no lengthy values' : '',
  empty: email.length < 3 ? 'no empty values' : ''
});

Even better, separate out the different states:

const [emptyError, setEmptyError] = useState('');

and then, eg, call setEmptyError instead when you need to set the error for empty.