Formik resetting form to initial values

Question

I am using Formik and have the following setup below where I want to be able to reset the form when the user presses the "Cancel" button. On return to the form, all form values should be reset to initialValues which are all nulls.

        <Formik
          enableReinitialize
          initialValues={{ 
            ...INITIAL_FORM_STATE
          }}
          validationSchema={ FORM_VALIDATION }
          onSubmit={handleSubmit}
        >
          {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (

          <Form>
             .....

I have the following code for the Cancel button:

                  <Button
                      text="Cancel"
                      startIcon={<UndoIcon />}
                      variant="contained"
                      color="default"
                      className={classes.buttons}                          
                      component={Link} 
                      to={'/home'}
                      onClick={() => { 
                          {resetForm}
                          setMenu("Home")
                      }}
                  />            

After entering some text into a form field and pressing the Cancel button, which directs me back to the Home page, I then go back to the form and notice that my text is still in state within the form and not resetting.

Can anyone please assist with what I am missing.

Answer 1

              <Button
                  text="Cancel"
                  startIcon={<UndoIcon />}
                  variant="contained"
                  color="default"
                  className={classes.buttons}                          
                  component={Link} 
                  to={'/home'}
                  onClick={() => { 
                      resetForm()
                      setMenu("Home")
                  }}
              />

You should use the resetForm() as a function call

Answer 2

`

const myForm = useFormik({
    initialValues:{ 
    value1:'',
    value2:''
    },
    onSubmit:( values ) = >{
     //submit data 
     ........

     //reset form after submit
     myForm.resetForm()
    }
)

on return

 <form onSubmit={myForm.submit}>
     ........
     <Button type="submit"/>
     <Button onClick={()=>myForm.resetForm()}>Reset</Button>
    </form>

`

Answer 3

you just need to set values of the input boxes to formik values:

<Formik
          enableReinitialize
          initialValues={{ 
            ...INITIAL_FORM_STATE
          }}
          validationSchema={ FORM_VALIDATION }
          onSubmit={handleSubmit}
        >
          {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (
<input value={values.propertyName}/>
          <Form>        

and now resetForm should work well

Answer 4

You must change values through values since you dont have access to resetForm from the button.

<Button
text="Cancel"
startIcon={<UndoIcon />}
variant="contained"
color="default"
className={classes.buttons}                          
component={Link} 
to={'/home'}
onClick={() => { 
    values = {
     someProperty: null,
    }
}}
/>     

Answer 5

As as I see your are using Material UI. I notice that you have a "to" property in your Button component I think you have to decide either remaining on the same page and reset your form or redirecting to another page. If you want to remain on the same page I would suggest you to get rid of it because this causes some conflict. You can implement it like this:

  return (<Formik
  enableReinitialize
  initialValues={{ 
    ...INITIAL_FORM_STATE
  }}
  validationSchema={ FORM_VALIDATION }
  onSubmit={(values, actions) => {
       actions.setSubmitting(false);
       console.log("Submit form", values);
   }}
>
  {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, handleSubmit, resetForm }) => (

  <Form onSubmit={handleSubmit}>
  ..... some inputs
  <Button
                  text="Cancel"
                  startIcon={<UndoIcon />}
                  variant="contained"
                  color="default"
                  className={classes.buttons}
                  component={Link}                          
                  onClick={() => handleReset(resetForm)}
              />
  </Form>
   )}
  </Formik>
  );

And inside you class create a handleReset method:

  const handleReset = (resetForm) => {
    if (window.confirm('Reset?')) {
      resetForm();
      setMenu("Home");
    }
  };