JSX có thể render bất kỳ biểu thức JavaScript nào, nên render theo điều kiện chỉ là JS thông thường dùng bên trong { }.
jsx
() {
(
);
}
JSX có thể render bất kỳ biểu thức JavaScript nào, nên render theo điều kiện chỉ là JS thông thường dùng bên trong { }.
() {
(
);
}
cond && <X/> — render <X/> khi cond đúng (truthy), ngược lại không gì. Tốt cho "hiện hoặc ẩn".cond ? <A/> : <B/> — chọn giữa hai nhánh.null để không render gì cả.&& với số{count && <Badge n={count} />} // ❌ khi count === 0, React render "0" lên màn hình!
{count > 0 && <Badge n={count} />} // ✅ canh bằng một boolean thật
Điều này xảy ra vì 0 && x cho ra 0, và React render số 0 (nhưng không render false/null/undefined).
Khi logic phức tạp, hãy tính phần tử trước lệnh return cho dễ đọc:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Điều này giữ JSX phẳng và logic quyết định rõ ràng.