React: Multi-Step Form using React-Bootstrap 5

React: Multi-Step Form using React-Bootstrap 5

Loading

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.

Related Posts
Leave a Reply

Your email address will not be published.Required fields are marked *