HDTuto.com

How to Write Switch Case in React JS?



This article goes in detailed on react switch case render component. This article goes in detailed on react switch case inside render. This post will give you simple example of react js switch case in render. you will learn react native switch case in render. Here, Creating a basic example of switch case statement in react js.

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 - HDTuto.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 - HDTuto.com</h1>

<SwitchCase value={'Admin'} />

</div>

);

}

export default App;

Output:

You are a Admin.

I hope it can help you...




May 27, 2020 | Category : React



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.