3-3. JSXで条件分岐を使う

三項演算子と&&演算子を使った条件分岐を学びます

React - 第1章: React基礎 - コンポーネントとJSX

📚

関連する教科書第1章: React基礎 - コンポーネントとJSX

課題：JSXで条件分岐を使おう

JSXでは、三項演算子（条件 ? A : B）や&&演算子を使って、条件に応じて表示を変えられます。

やること

1.StatusMessage コンポーネントを作る
2.Propsで isLoggedIn と hasNotification を受け取る
3.ログイン中なら「ようこそ！」、未ログインなら「ログインしてください」
4.hasNotification が true の時だけ「新着通知があります」を表示

条件分岐の書き方

三項演算子（どちらか一方を表示）：

{条件 ? <p>真の場合</p> : <p>偽の場合</p>}

// 例
{isLoggedIn ? <p>ようこそ！</p> : <p>ログインしてください</p>}

&&演算子（条件が真の時だけ表示）：

{条件 && <p>条件が真の時だけ表示</p>}

// 例
{hasNotification && <p>新着通知があります</p>}

ポイント：JSX内で条件分岐を使う時は、必ず {} で囲みます。

期待される出力

ようこそ！
新着通知があります

function StatusMessage({ isLoggedIn, hasNotification }) {
  return (
    <div>
      {/* ここに条件分岐を書いてください */}
      {/* isLoggedInがtrueなら「ようこそ！」、falseなら「ログインしてください」 */}
      
      
      {/* hasNotificationがtrueの時だけ「新着通知があります」を表示 */}
      
    </div>
  );
}

function App() {
  return (
    <div>
      <StatusMessage isLoggedIn={true} hasNotification={true} />
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 3-4. リストをmapで表示する

次のレッスン: 4-1. useStateで数値を管理する →