# Conditional Rendering 常見錯誤

<iframe width="560" height="315" src="https://www.youtube.com/embed/Rr5AqASIyxw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

:::spoiler 目錄
[TOC]
:::

## TL;DR
- 在 JSX 使用 0 時，雖然是 falsy 但還是渲染出來
- [官方文件特別提醒要注意](https://react.dev/learn/conditional-rendering#logical-and-operator-:~:text=in%20its%20place.-,Pitfall,-Don%E2%80%99t%20put%20numbers)

## Logical AND operator (&&)
在使用 `&&` 時要特別注意數字 0 的使用。
常見情況 : 根據是否是空陣列決定要不要印出陣列。

### 錯誤使用方法

1. 紅色 : 把 0 渲染出來

### 解決方法
1. 變成布林值
1. 綠色 : 判斷是否大於 0
2. 綠色 : 利用兩個 `!!`

2. 橘色 : 使用 Logical OR operator (||)

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