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 and Stepper together in core-ui 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:

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(


, 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 (

);
}
}

export default App;

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

1.GeneralForm.js

2.NomineeDetailForm.js

3.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 (


{page === 0 && }
{page === 1 && (

)}
{page === 2 && (

)}

);
}

}

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

export default Form;

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

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