Updating multiple states - React Native-CodePudding

I am trying to keep track of multiple states (error handling in this instance), but for reasons unknown at this stage (lack of understanding I think) I only seem able to keep the state of the last error function call

export const SignUp = () => {
  const [errors, setErrors] = useState({});
  
  const validateFirstName = () => {
    if (formData.firstName === undefined) {
      setErrors(prevState => ({
        ...prevState.firstName,
        firstName: 'First Name is required',
      }));
      return false;
    } else if (formData.firstName.length < 3) {
      setErrors(prevState => ({
        ...prevState.firstName,
        firstName: 'First Name is too short',
      }));
      return false;
    }
    return true;
  };

  const validateLastName = () => {
    if (formData.lastName === undefined) {
      setErrors(prevState => ({
        ...prevState.lastName,
        lastName: 'Last Name is required',
      }));
      return false;
    } else if (formData.lastName.length < 1) {
      setErrors(prevState => ({
        ...prevState.lastName,
        lastName: 'Last Name is too short',
      }));
      return false;
    }
    return true;
  };

  const formSubmitHandler = e => {
    e.preventDefault();
    validateFirstName();
    validateLastName();
  };
}

So in my formSubmitHandler I call each method in turn. Is this wrong? do they need to be async for example? Or does the issue lay within my setError function? Am i not setting the updated state correctly?

When I log out errors I only ever see lastName

{"errors": {"lastName": "Last Name is required"}}

Any advice appreciated, learning as I go but thought I had understood how to update the state.... obviously not in this case

Thanks

CodePudding user response：

This is where your problem is:

  {
    ...prevState.lastName,
    lastName: 'Last Name is too short',
  }

you're only passing the lastName (or firstName in the other function) to your new state, so it doesn't have the other values anymore.

Just do:

  {
    ...prevState,
    lastName: 'Last Name is too short',
  }

for all of them, and you should now have all the values in your Errors state

CodePudding user response：

Different ways you can go about doing this. You could also just batch your responses from the validators and set the state in one go. This will also reduce the rerending of your app.

Working Example: https://snack.expo.dev/@tnr_c/funny-raspberries

CodePudding user response：

State change in react are async so:

validateFirstName();
validateLastName();

Where you update the state of errors will lead to unpredictable results. There are few options to do form validations in react, to keep things basic I would start with: https://reactjs.org/docs/hooks-reference.html#usereducer

CodePudding user response：

Put the functions the same order as your form ,so it check each of them 1st before going to the next one.