Hello Devs,
In this tutorial, we are going to learn conditional rendering react native.
Follow this step by step guide given below:
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 - Rathorji.in</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 - Rathorji.in</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 - Rathorji.in</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 - Rathorji.in</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 - Rathorji.in</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 - Rathorji.in</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 - Rathorji.in</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 this example helps you.