Sometimes, we want to run the Formik setSubmitting outside the submit handler with React.
In this article, we’ll look at how to run the Formik setSubmitting outside the submit handler with React.
How to run the Formike setSubmitting() outside the submit handler with React?
To run the Formik setSubmitting outside the submit handler with React, we can get the setSubmitting function from the render prop parameter and call it.
For instance, we write:
import React from "react";
import { Formik } from "formik";
export default function App() {
return (
<div>
<Formik
ref={formikRef}
initialValues={{ email: "", password: "" }}
validate={(values) => {
const errors = {};
if (!values.email) {
errors.email = "Required";
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = "Invalid email address";
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
setSubmitting
}) => (
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{errors.email && touched.email && errors.email}
<input
type="password"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
/>
{errors.password && touched.password && errors.password}
<button type="submit" disabled={isSubmitting}>
Submit
</button>
<button type="button" onClick={() => setSubmitting(false)}>
reset
</button>
</form>
)}
</Formik>
</div>
);
}
We create a simple form with the Formik component.
We set the initial form values with initialValues.
And we set the validate prop to a function that checks the entered values, which are obtained from the values parameter.
The onSubmit prop is set to the form submit event handler.
We set the render prop to a function that returns a form.
We set the onSubmit prop to handleSubmit to run the function that we set as the value of the onSubmit prop.
From the render prop function, we get the setSubmitting function from the prop object parameter.
And we use handleBlur as the value of onBlur and the properties from values as the value of the value prop of the inputs.
The properties in values is determined by the value of the name attribute of each input.
Then we call that in the click event handler that we set as the value of the onClick prop of the reset button.
Conclusion
To run the Formik setSubmitting outside the submit handler with React, we can get the setSubmitting function from the render prop parameter and call it.
