<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://youtu.be/Rr5AqASIyxw">https://youtu.be/Rr5AqASIyxw</a></div>
<p> </p>
<h2 id="heading-tldr"><strong>TL;DR</strong></h2>
<ul>
<li><p>When using <code>0</code> in JSX, although it's falsy, it still gets rendered.</p>
</li>
<li><p><a target="_blank" href="https://react.dev/learn/conditional-rendering#logical-and-operator-:~:text=in%20its%20place.-,Pitfall,-Don%E2%80%99t%20put%20numbers"><strong>Official documentation specifically warns to be careful</strong></a></p>
</li>
</ul>
<h2 id="heading-logical-and-operator-ampamp"><strong>Logical AND operator (&amp;&amp;)</strong></h2>
<p>Be especially mindful of the usage of the number <code>0</code> when using <code>&amp;&amp;</code>. Common situation: Decide whether or not to print an array based on whether it's empty.</p>
<h3 id="heading-incorrect-usage"><strong>Incorrect Usage</strong></h3>
<ol>
<li>Red: Renders <code>0</code></li>
</ol>
<h3 id="heading-solutions"><strong>Solutions</strong></h3>
<ol>
<li><p>Convert to Boolean</p>
<ol>
<li><p>Green: Check if greater than <code>0</code></p>
</li>
<li><p>Green: Use double negation <code>!!</code></p>
</li>
</ol>
</li>
<li><p>Orange: Use Logical OR operator (||)</p>
</li>
</ol>
<iframe src="https://stackblitz.com/edit/react-uufonv?embed=1&amp;file=src%2FApp.js&amp;hideDevTools=1&amp;hideExplorer=1&amp;hideNavigation=1" style="height:50dvh;width:100%"></iframe>

%[https://youtu.be/Rr5AqASIyxw] 

## **TL;DR**

* When using `0` in JSX, although it's falsy, it still gets rendered.
    
* [**Official documentation specifically warns to be careful**](https://react.dev/learn/conditional-rendering#logical-and-operator-:~:text=in%20its%20place.-,Pitfall,-Don%E2%80%99t%20put%20numbers)
    

## **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**

1. Red: Renders `0`
    

### **Solutions**

1. Convert to Boolean
    
    1. Green: Check if greater than `0`
        
    2. Green: Use double negation `!!`
        
2. Orange: Use Logical OR operator (||)
    

<iframe src="https://stackblitz.com/edit/react-uufonv?embed=1&amp;file=src%2FApp.js&amp;hideDevTools=1&amp;hideExplorer=1&amp;hideNavigation=1" style="height:50dvh;width:100%"></iframe>

Jason Chen's Blog

Jason Chen's Blog

Common Mistakes in Conditional Rendering

Table of contents

TL;DR

Logical AND operator (&&)

Incorrect Usage

Solutions