import React, { useState } from 'react';
import './MultiStepForm.css';
const MultiStepForm = () => {
const [step, setStep] = useState(1);
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
password: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value
}));
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
const goToNextStep = () => {
setStep((prevStep) => prevStep + 1);
};
const goToPrevStep = () => {
setStep((prevStep) => prevStep - 1);
};
return (
<div className="multi-step-form">
<form onSubmit={handleSubmit}>
<div className={`form-step ${step === 1 ? 'active' : ''}`}>
<h2>Step 1: Personal Information</h2>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="First Name"
required
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="Last Name"
required
/>
{step !== 4 && (
<button type="button" onClick={goToNextStep}>
Next
</button>
)}
</div>
<div className={`form-step ${step === 2 ? 'active' : ''}`}>
<h2>Step 2: Account Information</h2>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
required
/>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Password"
required
/>
{step !== 1 && (
<button type="button" onClick={goToPrevStep}>
Previous
</button>
)}
{step !== 4 && (
<button type="button" onClick={goToNextStep}>
Next
</button>
)}
</div>
<div className={`form-step ${step === 3 ? 'active' : ''}`}>
<h2>Step 3: Additional Information</h2>
{/* Additional form fields */}
{step !== 1 && (
<button type="button" onClick={goToPrevStep}>
Previous
</button>
)}
{step !== 4 && (
<button type="button" onClick={goToNextStep}>
Next
</button>
)}
</div>
<div className={`form-step ${step === 4 ? 'active' : ''}`}>
<h2>Step 4: Confirmation</h2>
{/* Confirmation message or summary of entered data */}
{step !== 1 && (
<button type="button" onClick={goToPrevStep}>
Previous
</button>
)}
<button type="submit">Submit</button>
</div>
</form>
</div>
);
};
export default MultiStepForm;