How to implement conditional rendering in react.

Hello everyone,
In this article, let us understand how to render react elements conditionally.

React allows us to render UI markup based on different conditions. There may be more possible ways to implement conditional rendering in react, but i am going to discuss only a few points that are most commonly used.

To understand conditional rendering clearly we will take a simple example. Suppose we have two buttons in our app Login and Logout.
Our requirement is such like when we are logged in then Logout button should display and when we have logged out then Login button should display.

So how we will solve this problem.

Let's have a look one by one.

• By using if else Statement.

While executing if else block, when condition is satisfied then code inside if block will execute otherwise code inside else block will execute.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  const displayButton = () => {
    if (isLoggedin) {
      return <button>Logout</button>;
    } else {
      return <button>Login</button>;
    }
  };
  return (
    <div>
      <h1>Conditional rendering</h1>
      {displayButton()}
    </div>
  );
};

As we know we can write the javascript expression in jsx, so we have written one function which returns button element based on which condition is true and that particular returned element only will render.

• By using Element variables.

In this approach instead of using javascript function in jsx expression, we will use jsx element variable. Value of jsx element will be decided based on conditione like same as the previous approach.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  let Button;

  if (isLoggedin) {
    Button = <button>Logout</button>;
  } else {
    Button = <button>Login</button>;
  }

  return (
    <div>
      <h1>Conditional rendering</h1>
      {Button}
    </div>
  );
};

In the above example, we are using Button variable as jsx element and its value is assigned based on isLoggedin state.

• By Using Ternary Operators

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  return (
    <div>
      <h1>Conditional rendering</h1>
      {isLoggedin ? <button>Logout</button> : 
      <button>Login</button>}
    </div>
  );
};

In the above example, instead of using conditions in component functions, we are applying conditions in jsx expression itself. For applying conditions we are using the ternary operator, as we know ternary operators use three operands, the first is the condition itself, the second is the result which is returned if the condition is satisfied and the third is returned when the condition is not satisfied.

• By Using Logical && operator.

This approach is also a little bit similar to the previous approach but in this approach instead of the ternary operator, we use logical && operator.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  return (
    <div>
      <h1>Conditional rendering</h1>
      {isLoggedin && <button>Logout</button>}
      {!isLoggedin && <button>Login</button>}
    </div>
  );
};

In the above example there are two jsx expressions for rendering button element, based on isLoggedin state suitable jsx expression will be evaluated.

There may be more approaches but above mentioned approaches are commonly used.

I hope this post was useful.