ReactConditional rendering trong React không có cú pháp riêng — bạn dùng đúng biểu thức JavaScript bình thường. Vì JSX chỉ là lời gọi hàm, mọi thứ trả về giá trị đều nhúng được vào ngoặc nhọn.
Ba cách hay dùng, theo thứ tự từ đơn giản tới phức tạp:
// 1. Ba ngôi — chọn giữa hai nhánh
{isLoggedIn ? <Dashboard /> : <Login />}
// 2. Logical AND — có hoặc không
{isLoading && <Spinner />}
// 3. Tính trước rồi render — khi logic có nhiều nhánh
let content
if (status === 'loading') content = <Spinner />
else if (status === 'error') content = <ErrorBox />
else content = <List items={items} />
return <section>{content}</section>Cách 3 tồn tại vì if là câu lệnh, không phải biểu thức, nên không đặt được trong ngoặc nhọn. Tính ra biến trước return là cách chuẩn cho nhánh nhiều hơn hai.
Cạm bẫy hay gặp nhất nằm ở &&: toán tử này trả về toán hạng trái khi nó falsy, chứ không trả về false. Với {count && <List />} và count bằng 0, React nhận số 0 và render ra chữ "0" trên màn hình — vì 0 là giá trị hợp lệ để hiển thị, trong khi false, null, undefined thì bị bỏ qua. Cách chữa là ép về boolean thật: {count > 0 && <List />}.
Lưu ý: React bỏ qua false, null, undefined và chuỗi rỗng khi render, nhưng vẫn hiển thị số 0 và chuỗi "0". Đây là lý do bug "số 0 tự nhiên hiện ra" phổ biến tới mức nó thành câu hỏi phỏng vấn riêng.