Switch Statements

💻 React

Switch Statements

A switch statement evaluates a single expression against multiple discrete cases. In React, it is placed outside the JSX return and is ideal for rendering different components based on a status, role, step, or any enumerated value.

Switch is like a cleaner alternative to a long chain of if / else if / else if when checking a single variable against many possible string or number values.

function CourseStatus({ status }) {
  let badge;

  switch (status) {
    case 'published':
      badge = <span className="badge green">✓ Published</span>;
      break;
    case 'draft':
      badge = <span className="badge yellow">✎ Draft</span>;
      break;
    case 'archived':
      badge = <span className="badge gray">📂 Archived</span>;
      break;
    case 'under_review':
      badge = <span className="badge blue">👁 Under Review</span>;
      break;
    default:
      badge = <span className="badge default">Unknown</span>;
  }

  return <div>Status: {badge}</div>;
}

Switch in a Helper Function

A common pattern is to extract the switch into a helper function for reusability and cleaner components:

// Helper function — returns JSX based on step
function renderStep(step) {
  switch (step) {
    case 1: return <PersonalInfoForm />;
    case 2: return <CourseSelectionForm />;
    case 3: return <PaymentForm />;
    case 4: return <ConfirmationPage />;
    default: return <p>Invalid step.</p>;
  }
}

function Wizard({ currentStep }) {
  return (
    <div className="wizard">
      <h2>Step {currentStep} of 4</h2>
      {renderStep(currentStep)}
    </div>
  );
}