How to implement conditional rendering in react.
Tags: javascript, webdev, beginners, react
Published: 2022-02-12 11:26:26

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