問題一覧に戻る
初級JSX基礎
問題4: 条件付きレンダリング（三項演算子）

Reactで条件に応じて異なる内容を表示する方法を学びます。三項演算子を使用することで、条件がtrueの場合とfalseの場合で異なるJSXを返すことができます。

function UserStatus() {
  const isLoggedIn = true;
  const username = "Alice";
  
  return (
    <div>
      <h1>ユーザーステータス</h1>
      {/* ログイン状態に応じて表示を切り替え */}
      {isLoggedIn  (
        <p>ようこそ、{username}さん！</p>
      )  (
        <p>ログインしてください</p>
      )}
    </div>
  );
}

export default UserStatus;
···