reactjs - having some issues with my functions to update state and using promises

Question

basically, I am validating form fields by checking if they pass my regex, and if they do, I am setting state with either 'success' or 'error' (used by react-bootstrap).

so basically, I have about 6 functions that need to execute, however, the password field validation functions are giving me a lot of trouble.

My handleSubmit() at the moment looks something like this -

handleSubmit() {
  this.validate1();
  this.validate2();
  // ...
  this.validatePassword();
  this.validateConfirmPassword();
}

However, the issue is that validatePassword() will setState either 'success' or 'error', and since the functions are not firing off in order, I usually get the wrong result for validateConfirmPassword() .

I am reading the mozilla page on Promises, but I am really confused and not sure how to apply that in my code.

Could I do something like Promise.all([everything_except_validateConfirmPassword]).then(validateConfirmPassword()) but that doesn't seem right..

validatePassword(pass) {
    if (pass.length >= 8) {
      if (checkPass.test(pass)) {
        this.setState({
          passValidation: validation.success
        });
      } else {
        this.setState({
          passValidation: validation.error
        });
      }
    } else {
      this.setState({
        passValidation: validation.error
      });
    }
  }

validateConfirmPassword(pass, confirmPass) {
    const matches = pass === confirmPass;
    if (matches && this.state.passValidation === validation.success) {
      this.setState({
        confirmPassValidation: validation.success
      });
    } else {
      this.setState({
        confirmPassValidation: validation.error
      });
    }
  }

Answer 1

You can solve this by using React's componentDidUpdate in this way:

componentDidUpdate() {
  if (this.state.canCheckConfirmPwd) {
    this.validateConfirmPassword();
  }
}

validatePassword(pass) {
if (pass.length >= 8) {
  if (checkPass.test(pass)) {
    this.setState({
      passValidation: validation.success,
      canCheckConfirmPwd: true, // on next update we'll trigger validateConfirmPassword()
    });
  } else {
    this.setState({
      passValidation: validation.error
    });
  }
} else {
  this.setState({
    passValidation: validation.error
  });
  }
}

validateConfirmPassword(pass, confirmPass) {
    const matches = pass === confirmPass;
    if (matches && this.state.passValidation === validation.success) {
      this.setState({
        confirmPassValidation: validation.success,
        canCheckConfirmPwd: false, // to avoid retriggering the function on next update
      });
    } else {
      this.setState({
        confirmPassValidation: validation.error,
        canCheckConfirmPwd: false,
      });
    }
  }