How to use switch case statement in React class and functional component

In this tutorial, We are going to learn the Switch case expression in React component. It includes how to load components and render based on switch case expression.

In General Switch expression Statement syntax in javascript written is as follows

switch(expression or variable) {
    case case1:
        return "case1"
    case case2:
        return "case2"
    case case3:
        return "case3"
    default:
        return "default"
}

Expression is a javascript expression that is evaluated to value. Value is a variable value.

It checks the matching case and returns the code wrapped inside the return statement. The return statement can be any string or react component.

default case called when no matching case was found.

#React switch case in class components example

Switch expressions is never used in return expression inside jsx render. However, We can use the switch expression either in a separate function or inside the render function to get returned matching cases.

In the below example, Written switch expression in a separate function which returns the string or you can write it to return the component.

Switch expression checks the properties of a component and the matching case is returned.

Return of the react component calls this function.

react switch expression inside a separate function:

import React, { Component } from "react";

class ClassComponent extends Component {
  loadComponent() {
    switch (this.props.number) {
      case "1":
        return "One";
      case "2":
        return "two";
      default:
        return "default";
    }
  }
  render() {
    return <div>{this.loadComponent()}</div>;
  }
}

export default ClassComponent;

react switch expression inside a render function:

In this example, the Switch expression is used inside a render function, but not in the return statement. Here is an example

import React, { Component } from "react";

class ClassComponent extends Component {
  render() {
    switch (this.props.number) {
      case "1":
        return "One";
      case "2":
        return "two";
      default:
        return "default";
    }
    return <div>{this.loadComponent()}</div>;
  }
}

export default ClassComponent;

Call this function by passing the number property to classcomponent

import "./App.css";
import ClassComponent from "./ClassComponent";

function App() {
  return (
    <div className="App">
      <ClassComponent number="ten"></ClassComponent>
    </div>
  );
}

export default App;

#How to use switch case in React Functional components example

This shows how to use the switch case in the Function component example.

Created a separate function to handle the switch case to return matched case execution.

import React from "react";

const MyFunction = (number) => {
  return <div>{loadComponent(number)}</div>;
};
export default MyFunction;

function loadComponent(number) {
  switch (number) {
    case "1":
      return "One";
    case "2":
      return "two";
    default:
      return "default";
  }
}

#Conclusion

To summarize, It is always best to avoid switch-case expression. if you still want to use it, write a separate function and call this function in class and functional components.