React Conditional Statements in Render Tutorial

This tutorial shows you conditional rendering react native. it's simple example of react conditional statements in render. you can understand a concept of react conditional rendering example. This article goes in detailed on conditional rendering react native example.

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 - 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: 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 - ItSolutionStuff.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 - 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: 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.

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 - ItSolutionStuff.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 - ItSolutionStuff.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 - ItSolutionStuff.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...