DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Alex Blinov for JetRockets

Posted on • Originally published at jetrockets.pro

Reset values in React Final Form w/ keepDirtyOnReinitialize

How to reset values with keepDirtyOnReinitialize in React Final Form after submitting.

The Issue

If keepDirtyOnReinitialize is applied to your form, then form.reset() no longer able to remove field's value.

The Solution

The Solution is simpleβ€” if the form submitted successfully: first change keepDirtyOnReinitialize to false -> perform form reset form.reset() -> and change keepDirtyOnReinitialize back to true.

<Form
  onSubmit={onSubmit}
  keepDirtyOnReinitialize
  render={({ handleSubmit, form }) => (
    <form
       onSubmit={(event) => {
       const promise = handleSubmit(event);
       promise && promise.then(() => {
         form.setConfig('keepDirtyOnReinitialize', false);
         form.reset();
         form.setConfig('keepDirtyOnReinitialize', true);
       })
      return promise;
      }}
    >
    ...
   </form>
}/>

Top comments (0)

12 Gorgeous UI Components for Your Design Inspiration

12 Gorgeous UI components for your design inspiration: cards, text, buttons, checkboxes, icons, loaders and menus.