Switch statement allows you to define outcomes for multiple scenarios, so it’s invaluable for building dynamic apps in React.

How to use switch statement in React

There are a number of ways to use Switch in React. Every approach has its advantages and disadvantages.

Let’s start with the most common and straightforward approach. Embedding case statement in the JSX code.

The thing is, JSX allows you to embed JavaScript expressions, but not a statement. This is why you never see multiple lines of JavaScript code embedded in JSX.

You can, however, move switch out of the component. Create a helper function that accepts an argument, and uses switch to return a specific result.

Conditional rendering is one of the best use cases for switch statement in React. Let’s look at an example:

function App() {
  return (
    <div className="App">
      <h2>Let's embed a switch statement</h2>
      {determineShape("triangle")}
    </div>
  );
}
function determineShape(param) {
  switch (param) {
    case "triangle":
      return <Triangle />;
    case "square":
      return <Square />;
    case "circle":
      return <Circle />;
  }
}

determineShape function returns a component depending on the argument passed into it.

We can call the function from within JSX in our App component. Depending on the string passed to it as an argument, switch will return one of three React components.

Similarly, you can use switch to conditionally style elements in React.

Replace the switch statement with an object

If you must include switch statement inside JSX, you can rewrite it as an object, where properties represent the parameter (‘case’) and corresponding values represent what to render for that parameter.

Looking at an example will probably be easier to understand:

function App() {
  return (
    <div className="App">
      <h2>Let's embed a switch statement</h2>
      {
        {
          triangle: <Triangle />,
          square: <Square />,
          circle: <Circle />,
        }[square]
      }
    </div>
  );
}

Instead of passing an argument, we use bracket notation to get the desired result.

In my opinion, this is approach is cleaner and takes less lines of code. Granted, it’s less reusable than calling a function to implement switch statement in React.

Ternary operator

Ternary operator is arguably the best way to implement conditional logic in React. It is especially great for simple conditions.

Ternary operator can be embedded inside JSX, which is a great advantage over if/else and switch statements in React.

So let’s see how to use ternary operator to define multiple cases and outcomes, similar to switch statement in ReactJs.

<div className="App">
      <h2>Let's embed a switch statement</h2>
      {shape == "triangle" ? (
        <Triangle />
      ) : shape == "square" ? (
        <Shape />
      ) : shape == "circle" ? (
        <Circle />
      ) : null}
    </div>

In case you didn’t know, ternary operator is made up of three parts: the condition (shape == “triangle”) followed by a question mark. Then followed by an expression to return if the condition is true (if shape is indeed equal to a ‘triangle’, then return <Triangle />). Last part is what to return if the condition is false.

In the last part, instead of giving ternary operator another component to return, you can add another ternary operator, so you check for another option. You can keep checking as long as you’d like.

If you’ve chained multiple ternary operators, you can create an else statement – what to return if none of the conditions are met. Simply use the last ternary operator in the chain to return the default. In this way, ternary operators work like switch statement in React.

UX