Common Mistakes in Conditional Rendering
Table of contents
TL;DR
When using
0
in JSX, although it's falsy, it still gets rendered.
Logical AND operator (&&)
Be especially mindful of the usage of the number 0
when using &&
. Common situation: Decide whether or not to print an array based on whether it's empty.
Incorrect Usage
- Red: Renders
0
Solutions
Convert to Boolean
Green: Check if greater than
0
Green: Use double negation
!!
Orange: Use Logical OR operator (||)