0

I have created a formik form using useFormik hook. On submit i am calling the resetForm method but it is not clearing my input fields. My code looks like this

export default CandidateForm() => {
    const formik = useFormik({
        initialValues: {},
        validationSchema: candidateSchema,
        onSubmit: (values, {resetForm}) => {
          saveValues(value);
          resetForm({ values: {} });
        },
    });

    return (
        <form onSubmit={formik.handleSubmit}>
            <input
              value={formik.values.username}
              id='username'
              name='username'
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
            />
            <input
              value={formik.values.password}
              id='password'
              name='password'
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
            />
            <button onClick={() => formik.handleSubmit()}>Submit</button>
        </form>
    )
} 

On submit value is getting saved and formik is also getting reset but the input fields on screen are not getting cleared.

  • Have you checked this https://stackoverflow.com/questions/55583815/formik-how-to-reset-form-after-confirmation – Cemal Mar 25 '23 at 18:07
  • @Cemal But this post explains about formik. In my case formik values, errors are reset properly but react UI is not updating. On screen i am still able to see the values – Manikandan Uthaman Mar 25 '23 at 20:35
  • If that is a case you need to trigger a rerender most likely – Wayne Mar 27 '23 at 00:44
  • @ManikandanUthaman Another method is setting values to initial values with setValues(initialValues) in onSubmit method. That is all I have, hope it helps. – Cemal Apr 05 '23 at 10:00
  • Found the issue. I did not set the initial values in formik properly. Once I set the initial values properly, react recognized the change in state on formik reset and updated the UI accordingly – Manikandan Uthaman Apr 24 '23 at 04:54

0 Answers0