I cannot manage to reset my react redux form that is split in 3 different forms/pages. It's a wizard form and I have been trying many ways to reset it unsuccessfully.
I've been using these 2 resources: How to build a wizard form: https://redux-form.com/8.3.0/examples/wizard/ How to reset a form: https://redux-form.com/6.0.0-alpha.4/docs/faq/howtoclear.md/
However, it seems clear to me now that it kinda impossible to do so.
I have 3 pages like so: WizardForm.jsx
<div className="wizard__form-wrapper">
{page === 1
&& (
<WizardFormOne
onSubmit={this.nextPage}
initialValues={initialValues}
/>
)}
{page === 2
&& (
<WizardFormTwo
previousPage={this.previousPage}
onSubmit={this.nextPage}
/>
)}
{page === 3
&& (
<WizardFormThree
previousPage={this.previousPage}
onSubmit={values => onSubmit(values)}
/>
)}
</div>
and on each form I'm exporting my form like so: WizardFormOne.jsx
export default reduxForm({
form: 'wizard', // <------ same form name
destroyOnUnmount: false, // <------ preserve form data
forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
validate,
})(WizardFormOne);
The form works great but I cannot reset it. I've been trying all 4 options described in the link above. FOr example, in my WizardForm.jsx I do:
componentWillUnmount() {
const { dispatch } = this.props;
dispatch(reset('wizard'));
}
But nothing happens, and my form is not cleared.
Any help is much appreciated. Thank you.
For what its worth I found a solution to this issue:
You can pass a prop such as resetForm to the child component that contains the form, in m case it's WizardFormOne.jsx and do something like this:
I'm sure you can put it in componentDidMount I'll have to keep working on it. That did it in my case.