To create a multi-step form using React Bootstrap 5, you can follow these steps: 1. Install the required dependencies:
npm install react-bootstrap bootstrap
2. Next, create a new component called `MultiStepForm` and import the necessary components from react-bootstrap:
jsx
import React, { useState } from 'react';
import { Container, Row, Col, Form, Button, ProgressBar } from 'react-bootstrap';
3. Define the steps of the form and the initial state of the form:
jsx
const steps = ['Step 1', 'Step 2', 'Step 3'];
const initialFormData = {
step1: '',
step2: '',
step3: ''
};
4. Create the `MultiStepForm` component and use the `useState` hook to manage the form data and the current step:
jsx
const MultiStepForm = () => {
const [formData, setFormData] = useState(initialFormData);
const [currentStep, setCurrentStep] = useState(0);
// ... rest of the code
};
5. Create a function called `handleNext` to handle the next button click. This function will update the form data and move to the next step:
jsx
const handleNext = (event) => {
event.preventDefault();
setFormData({ ...formData, [`step${currentStep + 1}`]: event.target.value });
setCurrentStep(currentStep + 1);
};
6. Create a function called `handlePrev` to handle the previous button click. This function will move to the previous step:
jsx
const handlePrev = () => {
setCurrentStep(currentStep - 1);
};
7. Create a function called `handleSubmit` to handle the form submission. This function will display the form data:
jsx
const handleSubmit = () => {
alert('Form submitted: ' + JSON.stringify(formData));
};
8. Finally, render the form with the next and previous buttons, and the progress bar:
jsx
return (
<Container>
<Row>
<Col md={{ span: 6, offset: 3 }}>
<h1>Multi-Step Form</h1>
<ProgressBar now={(currentStep + 1) * (100 / steps.length)} />
<Form.Group controlId="formStep">
<Form.Label>{steps[currentStep]}</Form.Label>
<Form.Control type="text" placeholder={steps[currentStep]} onChange={handleNext} />
</Form.Group>
<Button variant="primary" type="button" onClick={currentStep > 0 ? handlePrev : handleSubmit}>
{currentStep > 0 ? 'Previous' : 'Submit'}
</Button>
</Col>
</Row>
</Container>
);
9. Now, you can use the `MultiStepForm` component in your application:
jsx
function App() {
return (
<div className="App">
<MultiStepForm />
</div>
);
}
export default App;
This will create a multi-step form using react-bootstrap 5. The form data will be stored in the `formData` state and the current step will be stored in the `currentStep` state. The `handleNext` function will be called when the next button is clicked, and the `handlePrev` function will be called when the previous button is clicked. The form submission will be handled by the `handleSubmit` function. The progress bar will be updated based on the current step.