三項演算子によるレンダリング

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 33/42。

JSXの波括弧の中にif文を入れることはできませんが、三項演算子なら問題なく入れることができ、画面上のほぼすべての二者択一をカバーできます。

{isLoggedIn ? 'Welcome back!' : 'Please log in'}

最初に条件、次に true の場合の値、最後に false の場合の値となります。どちら側も完全な JSX エレメントにすることができます：

{isLoggedIn
    ? <p>Welcome back!</p>
    : <button>Log in</button>}

これをステートと組み合わせると、ページがリアルタイムで切り替わります。ブーリアン値を反転させると、Reactはもう一方のブランチを再レンダリングします。

チャレンジ

簡単

ログインステータス行を作成します。

初期値が false であるブーリアン型の state loggedIn を追加します。
ボタン（id="login"）をクリックするたびに、その値を反転させます。
段落（id="status"）には、三項演算子を使用して、ログイン時は Welcome back! を、それ以外の場合は Please log in を表示します。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>