yup - Formik setStatus not updating - formik.status undefined

Question

I am trying to manually set the status on my formik instance upon receiving an error response from server:

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    onSubmit: async ({ email, password }, { setStatus }) => {
      try {
        const response = await loginUser({
          variables: {
            email,
            password,
          },
        });
      } catch (error) {
        await setStatus({ email: error.message, password: error.message });

        console.log(formik.status);
      }

      formik.resetForm();
    },
    validationSchema: Yup.object().shape({
      email: Yup.string(),
      password: Yup.string(),
    }),
  });

Logging status prints undefined.

Why is status not being set?

question from:https://stackoverflow.com/questions/65895856/formik-setstatus-not-updating-formik-status-undefined

Answer 1

Figured it out.

Using resetForm clears both form status and errors.

To get around this I have manually cleared both fields instead:

  initialValues={{
    email: "",
    password: "",
  }}
  onSubmit={async ({ email, password }, { setStatus, setFieldValue }) => {
    try {
      const response = await loginUser({
        variables: {
          email,
          password,
        },
      });
    } catch (error) {
      setStatus({
        email: "Shit",
      });

      setFieldValue("email", "");
      setFieldValue("password", "");
    }
  }}
  validationSchema={Yup.object().shape({
    email: Yup.string(),
    password: Yup.string(),
  })}