How do I reset a Formik form in React?

How do I reset a Formik form in React?

You can reset a Formik form by using the resetForm method provided by Formik. You can call this method in your form submission handler or any other event.

Can you show me an example of how to use resetForm?

Sure! Here's a simple example:

import { Formik, Form, Field } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values, { resetForm }) => {
        console.log(values);
        resetForm(); // This will reset the form fields
      }}
    >
      {() => (
        <Form>
          <Field name="name" placeholder="Enter your name" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

This will reset the form fields after submission.

What if I want to reset the form to specific values?

You can pass an object to resetForm with the values you want to set. For example:

resetForm({ values: { name: 'John Doe' } });

Thanks! Is there a way to reset the form on a button click?

Yes, you can create a button that calls resetForm directly. Just make sure to pass the resetForm function to your button's onClick handler.