ES6, React and Formik Returning SetSubmitting

Question

I have a problem here on setting the setSubmitting function of formik. Basically, I have three conditions on submit depending on the formik.values...

The problem is the setSubmitting is already firing once I click the the submit button so I think I need to return a success response on both onCreateProduct or confirmOverwriteProduct so I can successfully set the setSubmitting to false.

My problem is how can I do it since both onCreateProduct or confirmOverwriteProduct is on a different component.

Index.js

const Index = () => {
  const confirmOverwriteProduct = (overwriteDataToSubmit) => {
    dispatch(
      overwriteProduct({
        data: overwriteDataToSubmit,
        callback: function (result) {
          if (result === "error") {
            setSelectedDetails({
              content: "Error overwriting!",
              status: "error",
            });
            setOpenSnackbar(true);
          }
          if (result === "success") {
            setSelectedDetails({
              content: "Overwritten successfully!",
              status: "success",
            });
            setOpenSnackbar(true);
          }
        },
      })
    );
    setConfirmationDialog(false);
  };

  const onCreateProduct = (createProductDataToSubmit) => {
    dispatch(
      createProduct({
        data: createProductDataToSubmit,
        callback: function (result) {
          if (result === "error") {
            setSelectedDetails({
              content: "Error creating product!",
              status: "error",
            });
            setOpenSnackbar(true);
          }
          if (result === "success") {
            setSelectedDetails({
              content: "Product created successfully!",
              status: "success",
            });
            setOpenSnackbar(true);
          }
        },
      })
    );
    setConfirmationDialog(false);
  };

  return <Product />;
};

export default Index;

Product.js

const Product = () => {


  const formik = useFormik({
    initialValues: {
      productCode: product?.productCode || "",
      productImages: product?.productImages || [],
    },
    enableReinitialize: true,
    validationSchema: productSchema,
    onSubmit: (values, { setSubmitting }) => {
      const overwriteDataToSubmit = {
        productIndex,
        imageSlotMap: values.productImages?.map(
          ({ pk = "", newContentSlot = "" }) => ({
            pk,
            slotNumber: newContentSlot,
          })
        ),
      };

      const createProductDataToSubmit = {
        productIndex,
        imageSlotMap: values.productImages?.map(
          ({ pk = "", newContentSlot = "" }) => ({
            pk,
            slotNumber: newContentSlot,
          })
        ),
        ean: values?.productCode
      };


      if (formik.values.productStatusAfterAction)
        return confirmOverwriteProduct(overwriteDataToSubmit);

      if (formik.values.productExisting)
        return confirmOverwriteProduct(overwriteDataToSubmit);

      if (!formik.values.productExisting)
        return onCreateProduct(createProductDataToSubmit);

      setSubmitting(false);
    },
  });

  return ...else.

}

export default Product

Answer 1

When you return a Promise you don't have to explicitly reset isSubmitting()

const Parent = () => {
  const simpleTimeoutPromise = () =>
    new Promise((res) => {
      setTimeout(() => res("result"), 1000);
    });

  return (
    <Child simpleTimeoutPromise={simpleTimeoutPromise} />
  );
};

const Child = ({ simpleTimeoutPromise }) => (
  <Formik
    initialValues={{ input: "" }}
    onSubmit={(values) => simpleTimeoutPromise()}
  >
    {({ handleChange, values, isSubmitting, handleSubmit }) => (
       <form onSubmit={handleSubmit}>
          <label htmlFor="input">input</label>
          <input
            type="text"
            value={values.input}
            onChange={handleChange}
          />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
     )}
  </Formik>
);

More details and test methods in this codesandbox