How to Use Switch Case in React: Simple Guide with Examples

In React, you use a switch statement inside your functional component to decide what to render or what logic to run based on a variable's value. Place the switch inside the component function and return JSX from each case to control the output dynamically.

Syntax

The switch statement evaluates an expression and executes code blocks based on matching case values. It uses break to stop running further cases. In React, you typically use it inside a functional component to decide what JSX to return.

• switch(expression): The value to check.
• case value: Runs if expression matches value.
• break; Stops further cases from running.
• default: Runs if no case matches.

javascript

switch (value) {
  case 'option1':
    // code for option1
    break;
  case 'option2':
    // code for option2
    break;
  default:
    // code if no case matches
}

Example

This example shows a React functional component that uses a switch statement to render different greetings based on a language prop.

javascript

import React from 'react';

function Greeting({ language }) {
  switch (language) {
    case 'en':
      return <h1>Hello!</h1>;
    case 'es':
      return <h1>¡Hola!</h1>;
    case 'fr':
      return <h1>Bonjour!</h1>;
    default:
      return <h1>Hi!</h1>;
  }
}

export default function App() {
  return (
    <>
      <Greeting language="en" />
      <Greeting language="es" />
      <Greeting language="fr" />
      <Greeting language="de" />
    </>
  );
}

Output

<h1>Hello!</h1><h1>¡Hola!</h1><h1>Bonjour!</h1><h1>Hi!</h1>

Common Pitfalls

Common mistakes when using switch in React include forgetting break statements, which causes fall-through and unexpected output. Also, returning JSX directly inside cases without a return or wrapping the switch in a function can cause errors. Always ensure your switch is inside the component function and returns JSX properly.

javascript

function WrongSwitch({ value }) {
  switch (value) {
    case 'a':
      return <p>Option A</p>; // Missing return fixed
    case 'b':
      return <p>Option B</p>;
    default:
      return <p>Default</p>;
  }
}

function CorrectSwitch({ value }) {
  switch (value) {
    case 'a':
      return <p>Option A</p>;
    case 'b':
      return <p>Option B</p>;
    default:
      return <p>Default</p>;
  }
}

Quick Reference

Use switch inside React functional components to choose what to render based on a value. Always return JSX from each case. Remember to include a default case for unexpected values. Avoid fall-through by using break or returning directly.

Key Takeaways

Use switch statements inside React functional components to control rendering based on values.

Always return JSX from each case to render content correctly.

Include a default case to handle unexpected values gracefully.

Avoid missing return statements or break keywords to prevent bugs.

Switch is a clean alternative to multiple if-else conditions in React.