Conditional Multi-Step Rendering Using Switch Statements on Discriminated State

function RegistrationFlow({ onComplete }) {
  const [stepState, setStepState] = React.useState({ stage: 'EMAIL', data: {} });
 
  const advance = (nextStage, payload) => {
    setStepState((prev) => ({ stage: nextStage, data: { ...prev.data, ...payload } }));
  };
 
  const renderStage = () => {
    switch (stepState.stage) {
      case 'EMAIL':
        return <button onClick={() => advance('PASSWORD', { email: '[email protected]' })}>Submit Email</button>;
      case 'PASSWORD':
        return <button onClick={() => advance('CONFIRM', { pass: 'secret' })}>Set Password</button>;
      case 'CONFIRM':
        return <button onClick={() => onComplete(stepState.data)}>Finalize</button>;
      default: {
        const exhaustiveCheck = stepState.stage;
        throw new Error(`Unhandled wizard stage: ${exhaustiveCheck}`);
      }
    }
  };
 
  return <main className="wizard-container">{renderStage()}</main>;
}