Multi step form

Zod

import { useState } from 'react';
import { UserForm } from './UserForm';
import { ProfileForm } from './ProfileForm';

export default function App() {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({});

  const handleUserFormSubmit = model => {
    setForm(form => ({ ...form, user: model }));
    setStep(1);
  };

  if (step === 0) {
    return <UserForm onSubmit={handleUserFormSubmit} />;
  }

  if (step === 1) {
    return (
      <ProfileForm
        onSubmit={model =>
          window.alert(JSON.stringify({ ...form, profile: model }))
        }
      />
    );
  }

  return null;
}

Open Sandbox

JSON Schema

import { useState } from 'react';
import { UserForm } from './UserForm';
import { ProfileForm } from './ProfileForm';

export default function App() {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({});

  const handleUserFormSubmit = model => {
    setForm(form => ({ ...form, user: model }));
    setStep(1);
  };

  if (step === 0) {
    return <UserForm onSubmit={handleUserFormSubmit} />;
  }

  if (step === 1) {
    return (
      <ProfileForm
        onSubmit={model =>
          window.alert(JSON.stringify({ ...form, profile: model }))
        }
      />
    );
  }

  return null;
}

Open Sandbox

Simple Schema

import { useState } from 'react';
import { UserForm } from './UserForm';
import { ProfileForm } from './ProfileForm';

export default function App() {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({});

  const handleUserFormSubmit = model => {
    setForm(form => ({ ...form, user: model }));
    setStep(1);
  };

  if (step === 0) {
    return <UserForm onSubmit={handleUserFormSubmit} />;
  }

  if (step === 1) {
    return (
      <ProfileForm
        onSubmit={model =>
          window.alert(JSON.stringify({ ...form, profile: model }))
        }
      />
    );
  }

  return null;
}

Open Sandbox