# A Practical Approach to Conditional Rendering in React

# What is conditional rendering?

React components will frequently need to display different information based on the circumstances. Conditional rendering in React refers to the process of delivering elements and components based on specific conditions.

We'll go through the most common methods to use conditional rendering in React, as well as some tips and best practices.

Let’s take an example: suppose we have to render a White Hat `if` the color is white, `else` we have to render Black Hate.

## `if` Statement

We'll begin with the most naive approach, using an `if...else` block and build it from there.

```jsx
//images to render
const blackHat =
	"https://cdn.pixabay.com/photo/2014/03/25/16/33/fedora-297371_1280.png";
const whiteHat =
	"https://cdn.pixabay.com/photo/2014/04/03/00/35/hat-308778_1280.png";

const isWhite = true;
```

Now, render `whiteHat` if the `isWhite === true`, else render blackHat.

```jsx
if (isWhite) {
		// If isWhite is true 
		return <img src={whiteHat} width="200px" />;
	 }
else {
		// If isWhite is not true 
		return <img src={blackHat} width="200px" />;
	 }
```

Result when `whiteHat` is `true`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681218319925/6fdfb4cc-5050-4069-8fb6-b757e490c814.png align="left")

Result when `whiteHat` is not `true`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681218327218/267de2d4-d0e5-4669-9d9c-aca9e5f1b20d.png align="left")

## **Conditional (ternary) operator** `? :`

Another way to conditionally render elements is by using a ternary operator.

```jsx
return (
		isWhite ? (<img src={whiteHat} width={200}/> )
				: (<img src={blackHat} width={200}/> )
	   )
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681218436626/15fe0e0e-8289-497e-8588-51d55366422e.png align="left")

## **AND operator** `&&`

There is a special case where the ternary operator can be simplified. When you want to render either something or nothing, you can only use the `&&` operator.

In React, you can have expressions like the following:

```jsx
return (
		<>
			{isWhite && <img src={whiteHat} width={200}/>}
		</>
	)
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681218442486/32036bf7-95fa-4a45-ae21-16dd0b46de9f.png align="left")

If `isWhite` evaluates to `true`, then the `<img src={whiteHat} width={200}/>` will be returned by the expression. If `isWhite` evaluates to `false`, the `<img src={whiteHat} width={200}/>` component will be ignored, and an empty `<>` will be returned.

> ❌ **It is not recommended to use** `&&` Operator for conditional rendering.
> 
> ---
> 
> Sometimes it becomes buggy. For Example, when you try to put `isWhite = 0` or `isWhite = NaN` it will print `0` or `NaN` respectively rather than returning empty `<>`.
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681218477515/ee2b795c-e1fb-461e-81ae-43853f60ea90.png align="left")
> 
> Also, we have more control over our code when using other methods for conditional rendering.
> 
> **✅ If you want to use** `&&`, don’t put numbers on the left side of `&&`.
> 
> ---
> 
> To test the condition, JavaScript automatically converts the left side to a boolean. If the left side is `0`, the entire expression gets that value `0`, and React will gladly render `0` rather than nothing.
> 
> For example, a common mistake is to write code like `isWhite && <img src={whiteHat}/>`. It’s easy to assume that it renders nothing when `isWhite` is `0`, but it renders the `0` itself! as it rendered `NaN` in the above example rather than rendering nothing when the value of `isWhite` was `NaN`
> 
> To fix this issue, make the left side a boolean: `isWhite > 0 && <img src={whiteHat}/>`.

## Render Nothing

In certain circumstances, you can return `null` or `undefined` instead of the render output of the component to prevent it from being displayed.