問題一覧に戻る
初級JSX基礎
問題5: 論理AND演算子での条件付き表示

Reactで論理AND演算子（&&）を使用して、条件がtrueの場合のみ要素を表示する方法を学びます。これは要素の表示/非表示を切り替える最もシンプルな方法です。

function Notification() {
  const hasNewMessage = true;
  
  return (
    <div>
      <h2>通知センター</h2>
      {/* メッセージがある場合のみ表示 */}
      {hasNewMessage  (
        <div className="notification">
          <p>新着メッセージがあります！</p>
          <button>メッセージを確認</button>
        </div>
      )}
      {/* メッセージがない場合のみ表示 */}
      {!hasNewMessage  <p>新着メッセージはありません</p>}
    </div>
  );
}

export default Notification;
···