【React初心者メモ】JSXの条件文

JavaやPythonなどの他言語では、if文などを利用して、条件分岐を記述してきました。
Reactで利用されるJSXでは「式しか書けない」というルールがあるため、&&, ||, ?: などの論理演算を使って条件分岐を記述します。

&&

{条件 && <JSX>}：条件が true のときに表示

{isLoggedIn && <p>ようこそ！</p>}	

isLoggedIn=true → 「ようこそ！」が表示される
isLoggedIn=false → 何も表示されない

||

{条件 || <JSX>}：条件がfalsyのときに表示

{isLoggedIn || <p>ようこそ！</p>}	

isLoggedIn=true → 何も表示されない
isLoggedIn=false → 「ようこそ！」が表示される

? :

{条件 ? <A> : <B>}：条件によって2パターン切り替え

{isAdmin ? <p>管理者</p> : <p>一般ユーザー</p>}

isAdmin=true → 「管理者」を表示
isAdmin=false → 「一般ユーザー」を表示