Today I Learned

This project exists to catalogue the sharing & accumulation of knowledge as it happens day-to-day. Posts have a 200-word limit, and posting is open to any Rocketeer as well as selected friends of JetRockets. We hope you enjoy learning along with us.

Reset values in React Final Form

How to reset values in React Final Form after submitting

At first I wrote the following code:

<Form
  onSubmit={onSubmit}
  render={({ handleSubmit, form }) => (
    <form
      onSubmit={event => {
        handleSubmit(event).then(() => {
          form.reset();
        })
      }}
    >
    ...
    </form>
  }/>

If we implement a function like this, we will get an error “Uncaught TypeError: Cannot read property ‘then’ of undefined”, when we try to submit invalid form. Invalid forms — form with validation errors.

The solution

To avoid this error, we need to place handleSubmit(event) to a variable, and if the variable is not undefined call .then().

onSubmit={(event) => {
  const promise = handleSubmit(event);
  promise && promise.then(() => {
    form.reset();
  })
  return promise;
}}
Looking for help? At JetRockets, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.