How to find the length of a state in a react component

Question

There is a function as follows:

async function validate(value) { 
    try {
      const result = await schema.validate(value, { abortEarly: false });
      console.log(result);
      return result;
    } catch (error) {
      console.log(error.errors);
      setError({errors:error.errors});
      console.log(setError.length);
    }    
  }

In line number 8, the errors are updated in the state without any problem, but when I want to find the length of the state setError array, it returns the value of 1, even though the value of the created array is greater than 1. Is there a solution to find the state length in functional components in react?

Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — Konrad, Dec 02 '22 at 10:08

score 0 · Answer 1 · answered Dec 02 '22 at 16:51

Your code has 2 problems:

set state functions in React are async. It means that your values are not updated immediately. So you should declare a new variable and then log the new variable or write your console.log in useEffect.
You should log the length of the error state not the set state function.

So this would help you.

Let's assume you have this state:

const [error, setError] = useState({errors: []});

Using another variable:

async function validate(value) { 
  try {
    const result = await schema.validate(value, { abortEarly: false });
    console.log(result);
    return result;
  } catch (error) {
    console.log(error.errors);
    const newError = {errors: error.errors};
    setError(newError);
    console.log(newError.errors.length);
  }    
}

With useEffect:

async function validate(value) { 
  try {
    const result = await schema.validate(value, { abortEarly: false });
    console.log(result);
    return result;
  } catch (error) {
    console.log(error.errors);
    setError({errors: error.errors});
  }    

  useEffect(() => {
    console.log(error.errors.length);
  }, [error]);
}

score 0 · Accepted Answer · answered Dec 09 '22 at 16:14

If you want to use the length states, you must pass the array to the secondary state, then find the length from the primary state.

My problem is solved In fact, I should write as follows

async function validate(value) {
try {
const result = await schema.validate(value, { abortEarly: false });
setError([]);
return result;
} catch (error) {
setError(error.errors);
}
  }

The main problem of my code was that I had not transferred the answer of the function to the result correctly The problem was in the following line

const result = await validate(account);

I was then able to use result

score -1 · Answer 3 · answered Dec 02 '22 at 10:13

you doing wrong man, you are assigning {} to error state and then you are checking the length of setError method, I don't know why are you doing this

try like this

const Component =()=>{
const [errors, setError]=useState([]);

    async function validate(value) { 
    try {
      const result = await schema.validate(value, { abortEarly: false });
      console.log(result);
      return result;
    } catch (error) {
      console.log(errors.errors);
      setError([...errors,{errors:error.errors}]);
      console.log(errors.length); // here you will get previous length of errors array
    }    
 }
// console here 
console.log("ERROR LENGTH",errors.length);

return(
//UI stuff
)
}

Thanks for your answer, but setError is not updated with your solution — Mohammad Mahdi, Dec 02 '22 at 10:57

How to find the length of a state in a react component

3 Answers3