Avoid unsafe "&&" Operator for Conditional Rendering in React and Next.js
Tags: react, javascript, frontend, nextjs
Published: 2023-07-08 14:04:44

Let's talk about something we all know when developing our project using React: **Conditional Rendering**.

When it comes to Conditional Rendering in React, there are multiple ways to implement it. One of the favorite ways among developers is using **&& operator**.

```react
const Text = (isDisplayed) => {
  return (
    <div>
      // this one
      {isDisplayed && <p>{text}</p>}
    </div>
  );
};
```

Basically, if the condition is true, a HTML `<p>` element with a specific text will be displayed. Otherwise, it won't be rendered at all.

But have you ever checked all the possible values that can be true and false? If not, let's check out the results below!

```react
// Truthy values

// boolean
{true && <p>😸</p>}

// number
{20 && <p>😸</p>}

// string
{"string" && <p>😸</p>}

// object
{{} && <p>😸</p>}

// array
{[] && <p>😸</p>}

// function
{(() => {}) && <p>😸</p>}

// symbol
{Symbol("symbol") && <p>😸</p>}

// All of them will render <p>😸</p> ✅
```

So far, we haven't had to worry much about truthy conditions. But now, have you ever thought about what happens when the condition is falsy? 

```react
// Falsy values

// null - this won't render anything ✅
{null && <p>😸</p>}

// undefined - this won't render anything ✅
{undefined && <p>😸</p>}

// boolean - this won't render anything ✅
{false && <p>😸</p>}

// NaN - this will render NaN 🤯 ❌
{NaN && <p>😸</p>}

// 0 - this will render 0 🤯 ❌
{0 && <p>😸</p>}

// negative 0 - this will render 0 🤯 ❌
{-0 && <p>😸</p>}

// string - this won't render anything ✅
{"" && <p>😸</p>}
```

As it turns out, not all falsy values give the expected result. It can be quite baffling! 🤯 This issue often arises when dealing with a `Notification Badge`.

![Notification badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1b1vi1xcas57qluntkd.jpg)


You might think it's a minor problem, but guess what? Many developers simply forget to deal with it the right way!

## Solutions
Luckily, I've got a handful of solutions for this issue.

### 1. Convert `condition` to Boolean
```react
// NaN
{Boolean(NaN) && <p>😸</p>}

// 0
{Boolean(0) && <p>😸</p>}

// negative 0
{!!-0 && <p>😸</p>}

// string
{!!"" && <p>😸</p>}

// All of them won't render anything ✅
```

You can handle this by using the `Boolean(expression)` function or the double NOT operator `!!expression`. These methods will convert any data type into a boolean value. As seen in the results above, both `true` and `false` work perfectly fine in this case.

### 2. Use Ternary operator
```react
// NaN
{NaN ? <p>😸</p> : null}

// 0
{0 ? <p>😸</p> : null}

// negative 0
{-0 ? <p>😸</p> : null}

// string
{"" ? <p>😸</p> : null}

// All of them won't render anything ✅
```

When the condition is `falsy`, you can use the ternary operator to return `null` instead.

## Conclusion
So, we'll save ourselves from headaches and level up the quality of our code if we keep these things in mind. I hope this post has provided useful insights for your projects! ✨


## Bonus

If you already have [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) installed, you can enable the following rule.

```javascript
{
  // ...
  "react/jsx-no-leaked-render": ["error", { "validStrategies": ["coerce"] }]
  // ...
}
```

By doing so, ESLint will automatically replace all your Conditional Rendering codes to boolean.

```react
// From this ❌
{NaN && <p>😸</p>}

// To this ✅
{!!NaN && <p>😸</p>}
```