ItSolutionStuff.com

React Switch Case Statement Example

By Hardik Savani • September 6, 2020
React JS

Hello Dev,

I will explain step by step tutorial switch case statement in react js. This article will give you simple example of react switch case statement example. this example will help you react switch case in render example. We will look at example of react switch case render component.

In this post, i will give you two simple example of how to write switch case conditional statement in react native app. you can simply use switch case in render component. so let's see bellow example that will help you to understand how it works.

First example will cover react switch case statement in render function and Second example will cover up react switch case statement with component.

So, let's see both examples

Example 1:

src/App.js

import React from 'react';

function App() {

const userType = 'Admin';

return (

<div className="container">

<h1>React Switch Case Condition Example - ItSolutionStuff.com</h1>

{(() => {

switch (userType) {

case 'Admin':

return (

<div>You are a Admin.</div>

)

case 'Manager':

return (

<div>You are a Manager.</div>

)

default:

return (

<div>You are a User.</div>

)

}

})()}

</div>

);

}

export default App;

Output:

You are a Admin.

Example 2:

src/App.js

import React from 'react';

function App() {

function SwitchCase(props) {

switch(props.value) {

case 'Admin':

return 'You are a Admin.';

case 'Manager':

return 'You are a Manager.';

default:

return 'You are a User';

}

}

return (

<div className="container">

<h1>React Switch Case Condition Example - ItSolutionStuff.com</h1>

<SwitchCase value={'Admin'} />

</div>

);

}

export default App;

Output:

You are a Admin.

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

React If Condition in Render Example

Read Now →

React Bootstrap Toast Example

Read Now →

React Bootstrap Popovers Example

Read Now →

React Bootstrap Tabs Example Tutorial

Read Now →

React Bootstrap Tooltip Example

Read Now →

React Bootstrap Collapse Example

Read Now →

React Bootstrap Modal Popup Example

Read Now →

How to Install Bootstrap in React App?

Read Now →