How to access form component state inside handleSubmit.

I am trying to use setState to add a success message after handleSubmit completed successufully in form component. But it doesn’t works. Please help me to fix it or show me an alternative how to show success messages.

export default withFormik({
  mapPropsToValues ({ email }) {
    return {
      email: email || ''
    };
  },
  validationSchema: Yup.object().shape({
    email: Yup.string().email('Email not valid').required('Email is required')
  }),
  handleSubmit(values, { resetForm, setErrors, setSubmitting }) {
    
    Accounts.forgotPassword({
      email: values.email
    }, (error) => {
      if (error) {
        setErrors({ email: 'Error: ' + error.reason });
      } else {
        this.setState({success: 'Success: Check your inbox for a reset link!'});
        resetForm();
      }
      setSubmitting(false);
    });
  }
})(RecoverPassword);

[chrisheninger]

Hi Badis,

Since you’re inside the withFormik higher-order component, you’re not going to be able to setState on your RecoverPassword component. Luckily, Formik provides a method for passing results from handleSubmit into your form–  you’ll want to use setStatus https://github.com/jaredpalmer/formik#setstatus-status-any--void

Your handleSubmit will need to be updated to look something like this:

handleSubmit(values, { resetForm, setErrors, setStatus, setSubmitting }) {
    
    Accounts.forgotPassword({
      email: values.email
    }, (error) => {
      if (error) {
        setErrors({ email: 'Error: ' + error.reason });
      } else {
        setStatus({ success: true });
        resetForm();
      }
      setSubmitting(false);
    });
  }

You should then be able to access that value inside your RecoverPassword component by using this.props.form.status https://github.com/jaredpalmer/formik#status-any

Hopefully that points you in the right direction. Good luck!

[JavoByte]

@tplee923 , I share you what I did:

handleSubmit: (values, { setStatus, setSubmitting }) => {
    setSubmitting(true);
    setStatus({
      success: true,
    });
  }

That’s the function passed to withFormk and in the component I have this:

componentDidUpdate(prevProps) {
    const { success: wasSuccess = false } = prevProps.status || {};
    const { success: isSuccess = false } = this.props.status || {};
    if (isSuccess && !wasSuccess && this.htmlForm) {
      this.htmlForm.submit();
    }
  }

I use this to make a normal form submit after validating with formik