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.