DEV Community

Cover image for Stop Conditional Rendering in React Without Knowing This (&& and Ternary Operator)
Kingsley Ubah
Kingsley Ubah

Posted on • Updated on • Originally published at letsusetech.com

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

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

  1. Using the ternary operator

  2. 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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (8)

Collapse
 
zedic profile image
Oluwaseyi Muyiwa

Nice article, you can check this library that help when rending react components conditionally

npmjs.com/package/burokku

Collapse
 
ubahthebuilder profile image
Kingsley Ubah

Thanks for the recommendation!

Collapse
 
zedic profile image
Oluwaseyi Muyiwa

Welcome the tool is straight forward

Collapse
 
igorganapolsky profile image
Igor Ganapolsky • Edited

What about default values?
({ productsInStock.length = 0 }) => (
<div>
{productsInStock.length ? "Products in stock"}
</div>
);

Collapse
 
ghulam46 profile image
Ghulam Ammar Yanuar

Thanks for your knowledge!!

Collapse
 
ubahthebuilder profile image
Kingsley Ubah

Appreciated!

Collapse
 
lotfijb profile image
Lotfi Jebali

Great article with good examples
Waiting for your new writings

Collapse
 
ubahthebuilder profile image
Kingsley Ubah

Thanks Lotfi! Glad you enjoyed reading it.