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;
}}
Top comments (0)