ItSolutionStuff.com

React If Else If Condition in Render Example

By Hardik Savani β€’ September 6, 2020
React JS

Hello Dev,

Now, let's see example of if else if condition in react js. let’s discuss about react native if else condition in view. i would like to show you if else condition in render react native. you will learn react native if else condition.

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

First example will cover react if else statement in render function and Second example will cover up react if statement with component.

So, let's see both examples

Example 1: react if else statement in render function

src/App.js

import React from 'react';

function App() {

const userType = 2;

return (

<div className="container">

<h1>React If ElseIf Condition Example - ItSolutionStuff.com</h1>

{(() => {

if (userType == 1) {

return (

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

)

} else if (userType == 2) {

return (

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

)

} else {

return (

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

)

}

})()}

</div>

);

}

export default App;

Output:

You are a Manager.

Example 2: react if else statement with component

src/App.js

import React from 'react';

function App() {

function MyCondition(props) {

const userType = props.type;

if (userType == 1) {

return <p>Here, You can write admin template. You are a Admin.</p>;

}else if(userType == 2){

return <p>Here, You can write manager template. You are a Manager.</p>;

}

return <p>Here, You can write user template. You are a User.</p>;

}

return (

<div className="container">

<h1>React If Condition Example - ItSolutionStuff.com</h1>

<MyCondition type={2} />

</div>

);

}

export default App;

Output:

Here, You can write manager template. You are a Manager.

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 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 β†’
β˜…

Laravel React JS Axios Post Request Example Tutorial

Read Now β†’
β˜…

Laravel 5 - Simple CRUD Application Using ReactJS - Part 1

Read Now β†’