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: {},
};
const formSlice = createSlice({
name: 'form',
initialState,
reducers: {
updateFormData: (state, action) => {
state.formData = { ...state.formData, ...action.payload };
},
resetFormData: (state) => {
state.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.
Top comments (0)