Create a Multi-Step Form (Stepper)

import { useState } from "react";

function MultiStepForm() {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    name: "",
    email: "",
    address: ""
  });

  function next() {
    setStep((s) => Math.min(3, s + 1));
  }
  function prev() {
    setStep((s) => Math.max(1, s - 1));
  }

  return (
    <div>
      {step === 1 && (
        <div>
          <input
            value={form.name}
            onChange={(e) =>
              setForm((f) => ({ ...f, name: e.target.value }))
            }
            placeholder="Name"
          />
        </div>
      )}
      {step === 2 && (
        <div>
          <input
            value={form.address}
            onChange={(e) =>
              setForm((f) => ({ ...f, address: e.target.value }))
            }
            placeholder="Address"
          />
        </div>
      )}
      {step === 3 && (
        <pre>{JSON.stringify(form, null, 2)}</pre>
      )}

      <div>
        <button onClick={prev} disabled={step === 1}>
          Back
        </button>
        <button onClick={next} disabled={step === 3}>
          Next
        </button>
      </div>
    </div>
  );
}