# React Js Wizard Form using Redux Form

One common UI design pattern is to separate a single form into separate pages of inputs, commonly known as a Wizard. There are several ways this can be achieved. But using redux form it is a hectic task.

Though redux form provides wizard form but we cannot get the effect of a stepper. In this post, we will see how we can integrate the wizard form of [Redux-Form](https://redux-form.com/7.4.2/examples/wizard/) and [Stepper](https://www.npmjs.com/package/react-stepper-horizontal) together in [core-ui](https://coreui.io/react/) template

**Installation**

1.  Redux-Form

npm i redux-form

2\. Horizontal Stepper

npm i react-stepper-horizontal

3\. Core ui

npm i @coreui/react

4\. Redux

npm i redux

5\. React Redux

npm i react-redux

Once all these packages are installed your package.json will look like this. If not copy the below code and paste it in your package.json and run npm install

**Package.json**

{  
 “name”: “wizard-form”,  
 “version”: “0.1.0”,  
 “private”: true,  
 “dependencies”: {  
 “[@coreui/coreui](http://twitter.com/coreui/coreui "Twitter profile for @coreui/coreui")”: “².0.6”,  
 “[@coreui/icons](http://twitter.com/coreui/icons "Twitter profile for @coreui/icons")”: “0.3.0”,  
 “[@coreui/react](http://twitter.com/coreui/react "Twitter profile for @coreui/react")”: “².0.5”,  
 “bootstrap”: “⁴.1.3”,  
 “classnames”: “².2.6”,  
 “core-js”: “².5.7”,  
 “font-awesome”: “⁴.7.0”,  
 “react”: “¹⁶.5.2”,  
 “react-dom”: “¹⁶.5.2”,  
 “react-redux”: “⁵.0.7”,  
 “react-scripts”: “1.1.5”,  
 “react-stepper-horizontal”: “¹.0.11”,  
 “react-toastify”: “⁴.3.0”,  
 “reactstrap”: “⁶.4.0”,  
 “redux”: “⁴.0.0”,  
 “redux-form”: “⁷.4.2”  
 },  
 “scripts”: {  
 “start”: “react-scripts start”,  
 “build”: “react-scripts build”,  
 “test”: “react-scripts test — env=jsdom”,  
 “eject”: “react-scripts eject”  
 }  
}

we will create a simple user form screen using redux-form. Follow the project structure mentioned below:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055742634/f395da7b-fe76-4e43-88c3-cf22f9667da6.png)

Once the folder is created we will make some tweaks in the App.js and will add the store in index.js

**Index.js**

import React from ‘react’;  
import ReactDOM from ‘react-dom’;  
import ‘./index.css’;  
import App from ‘./App’;  
import registerServiceWorker from ‘./registerServiceWorker’;  
import { Provider } from ‘react-redux’;  
import store from ‘./redux/store’;

ReactDOM.render(  
 <Provider store={store}>  
 <App />  
 </Provider>, document.getElementById(‘root’));  
registerServiceWorker();

**App.js**

import React, { Component } from ‘react’;  
import ‘[@coreui/icons](http://twitter.com/coreui/icons "Twitter profile for @coreui/icons")/css/coreui-icons.min.css’;  
import ‘font-awesome/css/font-awesome.min.css’;  
import ‘./scss/style.css’;

import Form from ‘../src/form’;

class App extends Component {  
 result = (values) => {  
 console.log(‘result is’, values);  
 }

render() {  
 return (  
 <Form onSubmit={this.result}/>  
 );  
 }  
}

export default App;

Once it is done we will create the forms needed for our example namely

[1.GeneralForm.js](https://github.com/nidhinkumar06/wizardForm/blob/master/src/form/GeneralForm.js)

[2.NomineeDetailForm.js](https://github.com/nidhinkumar06/wizardForm/blob/master/src/form/NomineeDetailsForm.js)

[3.PersonalDetailsForm.js](https://github.com/nidhinkumar06/wizardForm/blob/master/src/form/PersonalDetailsForm.js)

All these forms are connected using the redux form with the same form name and to preserve form data across form component unmounts we will use

destroyOnUnmount: false

flag on each form.

export default reduxForm({  
 form: ‘wizardForm’,  
 destroyOnUnmount: false,  
 forceUnregisterOnUnmount: true,  
 validate  
})(GeneralForm);

Once the forms are created it’s time to stitch all these forms into a single form and add stepper for it

**Form.js**

class Form extends Component {

constructor(props) {  
 super(props);  
 this.nextPage = this.nextPage.bind(this);  
 this.previousPage = this.previousPage.bind(this);  
 this.state = {  
 page: 0,  
 steps: \[  
 {title: ‘Visitor Details’},  
 {title: ‘Personal Details’},  
 {title: ‘Nominee Details’}  
 \]  
 };  
 }

nextPage() {  
 this.setState({ page: this.state.page + 1 });  
 }

previousPage() {  
 this.setState({ page: this.state.page — 1 });  
 }

render() {  
 const { onSubmit } = this.props;  
 const { page, steps } = this.state;

return (  
 <Card>  
 <Stepper steps={ steps } activeStep={ page } />  
 {page === 0 && <GeneralForm onSubmit={this.nextPage} />}  
 {page === 1 && (  
 <PersonalDetailsForm  
 previousPage={this.previousPage}  
 onSubmit={this.nextPage}  
 />  
 )}  
 {page === 2 && (  
 <NomineeDetailsForm  
 previousPage={this.previousPage}  
 onSubmit={onSubmit}  
 />  
 )}  
 </Card>  
 );  
 }

}

Form.propTypes = {  
 onSubmit: PropTypes.func  
};

export default Form;

We are all set to test our app and we will get the output like this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055743964/06fae6ee-afbb-48a2-ba58-97386fe701c5.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055745544/3cefc149-8d83-472a-bce8-0af9dde38e1f.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055747187/1172788a-0483-4eca-a199-36edab26556d.png)

Optional: If you need validation for each page you can add it and import it in each form

Click here to download the [source code](https://github.com/nidhinkumar06/wizardForm)