JSX は任意の JavaScript expression を render できるため、conditional rendering は { } の中で通常の JS を使うだけです。
jsx
() {
(
);
}
cond && <X/> — cond が truthy のとき <X/> を render し、それ以外では何も render しない。「表示/非表示」に向いています。cond ? <A/> : <B/> — 2 つの branch から選ぶ。null を返すと、完全に何も render しない。&&{count && <Badge n={count} />} // ❌ count === 0 のとき、React は画面に "0" を render する!
{count > 0 && <Badge n={count} />} // ✅ 本物の boolean で guard する
これは 0 && x が 0 に評価され、React が number の 0 を render するためです（false / null / undefined は render しません）。
logic が複雑になったら、読みやすさのために return の前で element を計算します。
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
これにより JSX は flat に保たれ、判断ロジックも明確になります。