Formik: How to access form component state inside handleSubmit.

[badis]

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!

[badis]

Thanks, That solved my problem.

[arpanpatel]

Hi @chirisheninger I am new in react.can please give some demo..that will be very helpful. Thanks in advance :)

[tplee923]

@badis Would you please post code that how did you receive the this.props.form.status in your wrapped component and change the component state based on that?

[tplee923]

The status is a top-level status object. So to access it in the wrapped component, it is rather "this.props.status" than "this.props.form.status"

[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

[nilamsavani91]

Hi,
I am using react function component and I have many states in my component. Now, i want to add withFormik() hook for form validation. I already have some code on onchange of my select as I want to set state for different elements based on the selected value from dropdown. How can I use state and handle change using withFormik.