Kingsley Ubah

Posted on Sep 4, 2023 • Updated on Sep 7, 2023 • Originally published at letsusetech.com

Stop Conditional Rendering in React Without Knowing This (&& and Ternary Operator)

#javascript #react #webdev #programming

In React, you can do conditional rendering in two different ways:

Using the ternary operator
Using the logical AND operator (&&)

Both of these methods get the job done. But there are some side effects you should know about before using both of them.

Let’s explore these side effects in detail, starting with the logical AND operator.

Sidenote: If you’re new to learning web development, and you’re looking for the best resource to help with that, I strongly recommend HTML to React: The Ultimate Guide.

The Problem With Using the Logical And (&&) for Conditional Rendering

Let’s say want to build a ProductsInStock component that renders a “Products in stock” text if there are products in stock and “No products” if there are no products in stock.

You can execute this conditional rendering using the logical AND operator, like so:

import React, {useState} from 'react'

export default function ProductsInStock() {
  const [productsInStock, setProductsInStock] = useState([])

  return (
    <div>
      {productsInStock.length && "Products in stock" }
    </div>
  )
}

If the length is a “falsy” value, JavaScript will simply short-circuit and stop evaluating the rest of the expression, therefore returning just the first part of it. This will result in the problem where the number 0 is rendered inside the <div>.

Now this is actually not a JavaScript issue, but rather a JSX one. According to JSX standards, if you have {0} in your template, it’ll actually render the zero. This same behavior occurs if the expression evaluates to NaN (it renders “NaN” on the page)

With other falsy values, however, nothing will be rendered on the page, as expected. The falsy values, in particular, are null, undefined, and the empty string literal ("").

So now that we have gone over the problems, what are the solutions? Let’s explore each of them!

Solution 1: Make Your Conditional Statement More Explicit

When you use a variable that is going to be evaluated to zero, you need to make your conditional statement more explicit: if the length is greater than zero, output the given string. Otherwise, don’t render anything:

import React, {useState} from 'react'

export default function ProductsInStock() {
  const [productsInStock, setProductsInStock] = useState([])

  return (
    <div>
      {productsInStock.length > 0 && "Products in stock" }
    </div>
  )
}

With this code, you won’t see “0” on your page.

Solution 2: Use Exclamation Marks

You can also avoid the aforementioned bug by adding two exclamation marks in front of the conditional statement:

import React, {useState} from 'react'

export default function ProductsInStock() {
  const [productsInStock, setProductsInStock] = useState([])

  return (
    <div>
      {!!productsInStock.length > 0 && "Products in stock" }
    </div>
  )
}

The exclamation marks will convert the array's length into a boolean value. A falsy value (i.e. 0) will turn into false, and in that case, nothing will show on the page. But if the length is a truthy value, whatever you put after the && will be used.

This method also works for NaN (it doesn’t render anything on the page).

Best Solution: Use the Ternary Operator

With ternary operators, you can avoid the bug by using null as the “else” option. :

import React, {useState} from 'react'

export default function ProductsInStock() {
  const [productsInStock, setProductsInStock] = useState([])

  return (
    <div>
      {productsInStock.length ? "Products in stock" : null }
    </div>
  )
}

This code is straightforward and more readable compared to the other two solutions.

Conclusion

The ternary operator remains the best way to render conditionally in React thanks to its concise and readable syntax. But if you’re to use any of the other methods, it’s important to always remember the side effects mentioned in this article.

Want to collaborate with me? Fill out this form.