Hello Devs,

In this tutorial, we are going to see example of if else if condition in react js.

Given below are few examples of if else if condition in react js.




Example 1: react if else statement in render function

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: react if else 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 - Rathorji.in</h1>
    
        <MyCondition type={2} />
   
    </div>
  );
}
   
export default App;


Output:

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


I hope this example helps you.