Sự khác biệt giữa null, undefined, false và chuỗi rỗng khi render trong JSX là gì?

Trong JSX:
- null, undefined, true, và false: React sẽ bỏ qua hoàn toàn và không render ra bất kỳ thứ gì trên DOM. (Điều này cho phép dùng && để conditional rendering).
- Chuỗi rỗng (""): Sẽ render ra một text node rỗng.

Cạm bẫy với số 0 (Falsy values):
Mặc dù số 0 hoặc NaN là falsy trong JavaScript, React vẫn sẽ render chúng thành text.

Ví dụ lỗi:

jsx

{count && <List />} // Nếu count = 0, màn hình sẽ in ra số "0"

Cách khắc phục:
Đảm bảo biểu thức bên trái toán tử && luôn là một Boolean (true/false) bằng cách dùng phép so sánh hoặc ép kiểu:

jsx

{count > 0 && <List />} 
// Hoặc:
{!!count && <List />}

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React

Cạm bẫy với số 0 (Falsy values):
Mặc dù số 0 hoặc NaN là falsy trong JavaScript, React vẫn sẽ render chúng thành text.

Ví dụ lỗi:

jsx

{count && <List />} // Nếu count = 0, màn hình sẽ in ra số "0"

Cách khắc phục:
Đảm bảo biểu thức bên trái toán tử && luôn là một Boolean (true/false) bằng cách dùng phép so sánh hoặc ép kiểu:

jsx

{count > 0 && <List />} 
// Hoặc:
{!!count && <List />}