{

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


In this tutorial, We are going to learn 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 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 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 called when no matching case was found.

React switch case in class components example

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

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

Switch expression checks the properties of a component and matching case 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 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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.