HDTuto.com

Conditional Rendering in React JS Tutorial



In this article we will cover on how to implement react conditional statements in render. We will look at example of react conditional rendering example. you can see conditional rendering react native example. you will learn react js conditional statement example. Let's see bellow example react native conditional statement.

In this post, i would like to show you all conditional statements in react js. how you can use if, else if, switch case and ternary condition in react native. i will give you example of react conditional statements in render with function and component.

So, let's see bellow example with following all conditional statements.

1) React If Condition in Render

2) React If Else Condition in Render

3) React Switch Case in Render

4) React Ternary Operator in Render

Now we will see one by one all examples:

1) React If Condition in Render

Example 1: src/App.js

import React from 'react';

function App() {

const userType = 1;

return (

<div className="container">

<h1>React If Condition Example - HDTuto.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: 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 {

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

}

}

return (

<div className="container">

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

<MyCondition type={1} />

</div>

);

}

export default App;

Output:

Here, You can write admin template. You are a Admin.

2) React If Else Condition in Render

Example 1: src/App.js

import React from 'react';

function App() {

const userType = 2;

return (

<div className="container">

<h1>React If ElseIf Condition Example - HDTuto.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: 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 - HDTuto.com</h1>

<MyCondition type={2} />

</div>

);

}

export default App;

Output:

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

3) React Switch Case in Render

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.

4) React Ternary Operator in Render

src/App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

function App() {

const isLoading = 1;

return (

<div className="container">

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

<div>

{isLoading == 1 ?

<p>Value is One.</p> :

<p>Value is Another.</p>}

</div>

</div>

);

}

export default App;

Output:

Value is One

I hope it can help you...




May 30, 2020 | Category : React



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.