React If Condition in Render Example

By Hardik Savani | May 21, 2020 | Category : React JS


Hello Dev,

Now, let's see article of react if condition example. you will learn if condition example in react js. We will look at example of react if statement example. This article will give you simple example of react if condition in render. Let's see bellow example react if statement in render method.

In this post, i will give you two simple example of how to write if conditional statement in react native app. you can simply use if 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 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 statement in render function

src/App.js

import React from 'react';

function App() {

const userType = 1;

return (

<div className="container">

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

{(() => {

if (userType == 1) {

return (

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

)

} else {

return (

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

)

}

})()}

</div>

);

}

export default App;

Output:

You are a Admin.

Example 2: react if 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...



Tags : React JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: