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; }}