Reactでのマルチステップフォームの実装方法

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: ''
  });

  const handleNext = () => setStep(step + 1);
  const handlePrev = () => setStep(step - 1);

  return (
    <div>
      {step === 1 && <Step1 formData={formData} setFormData={setFormData} />}
      {step === 2 && <Step2 formData={formData} setFormData={setFormData} />}
      {step === 3 && <Step3 formData={formData} />}
      <div>
        {step > 1 && <button onClick={handlePrev}>Previous</button>}
        {step < 3 && <button onClick={handleNext}>Next</button>}
      </div>
    </div>
  );
};

const Step1 = ({ formData, setFormData }) => (
  <div>
    <label>
      Name:
      <input
        type="text"
        value={formData.name}
        onChange={e => setFormData({ ...formData, name: e.target.value })}
      />
    </label>
  </div>
);

const Step2 = ({ formData, setFormData }) => (
  <div>
    <label>
      Email:
      <input
        type="email"
        value={formData.email}
        onChange={e => setFormData({ ...formData, email: e.target.value })}
      />
    </label>
  </div>
);

const Step3 = ({ formData }) => (
  <div>
    <label>
      Address:
      <input
        type="text"
        value={formData.address}
      />
    </label>
  </div>
);

const handleSubmit = () => {
  // API call or form submission logic
  setFormData({
    name: '',
    email: '',
    address: ''
  });
};

const StepIndicator = ({ currentStep }) => (
  <div>
    <span>{currentStep} / 3</span>
  </div>
);