Creating a Multipage Form with React-Hook-Form and

Building a multipage form in React can be streamlined using React-Hook-Form for form handling and Redux-Toolkit for state management. Here’s a guide on how to effectively combine these tools.

Step 1: Setup Your Project
First, set up your React project and install the necessary dependencies:

npx create–react–app multipage–form

cd multipage–form

npm install @reduxjs/toolkit react-redux react-hook-form

Step 2: Configure Redux-Toolkit
Create a Redux store and slice to manage the form state.

store.js

import { configureStore } from ‘@reduxjs/toolkit‘;
import formReducer from ‘./formSlice‘;

export const store = configureStore({
reducer: {
form: formReducer,
},
});

formSlice.js

import { createSlice } from ‘@reduxjs/toolkit‘;

const initialState = {
formData: {},
};

export const { updateFormData, resetFormData } = formSlice.actions;
export default formSlice.reducer;

Step 3: Create Form Pages
Define individual form pages using react-hook-form to handle validation and data collection.

Page1.js

import React from ‘react‘;
import { useForm } from ‘react-hook-form‘;
import { useDispatch } from ‘react-redux‘;
import { updateFormData } from ‘./formSlice‘;
import { useNavigate } from ‘react-router-dom‘;

const Page1 = () => {
const { register, handleSubmit } = useForm();
const dispatch = useDispatch();
const navigate = useNavigate();

const onSubmit = (data) => {
dispatch(updateFormData(data));
navigate(‘/page2‘);
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {…register(‘firstName‘)} placeholder=“First Name“ />
<input {…register(‘lastName‘)} placeholder=“Last Name“ />
<button type=“submit“>Next</button>
</form>
);
};

export default Page1;

Page2.js

import React from ‘react‘;
import { useForm } from ‘react-hook-form‘;
import { useDispatch, useSelector } from ‘react-redux‘;
import { updateFormData } from ‘./formSlice‘;
import { useNavigate } from ‘react-router-dom‘;

const Page2 = () => {
const { register, handleSubmit } = useForm();
const dispatch = useDispatch();
const navigate = useNavigate();
const formData = useSelector((state) => state.form.formData);

const onSubmit = (data) => {
dispatch(updateFormData(data));
navigate(‘/summary‘);
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {…register(‘email‘)} placeholder=“Email“ />
<input {…register(‘phone‘)} placeholder=“Phone“ />
<button type=“submit“>Next</button>
</form>
);
};

export default Page2;

Step 4: Summary Page
Create a summary page to display collected data.

Summary.js

import React from ‘react‘;
import { useSelector } from ‘react-redux‘;

const Summary = () => {
const formData = useSelector((state) => state.form.formData);

return (
<div>
<h2>Summary</h2>
<pre>{JSON.stringify(formData, null, 2)}</pre>
</div>
);
};

export default Summary;

Step 5: Set Up Routing
Configure routing to navigate between form pages. Or you could just have a single page and have the different form show up when you click on the next button, but for this example I will use the routing option

App.js

import React from ‘react‘;
import { BrowserRouter as Router, Route, Routes } from ‘react-router-dom‘;
import Page1 from ‘./Page1‘;
import Page2 from ‘./Page2‘;
import Summary from ‘./Summary‘;
import { Provider } from ‘react-redux‘;
import { store } from ‘./store‘;

const App = () => (
<Provider store={store}>
<Router>
<Routes>
<Route path=“/“ element={<Page1 />} />
<Route path=“/page2“ element={<Page2 />} />
<Route path=“/summary“ element={<Summary />} />
</Routes>
</Router>
</Provider>
);

export default App;

Conclusion
By using react-hook-form and redux-toolkit, you can easily manage form data across multiple pages. This approach ensures a seamless user experience with efficient state management and form handling.