条件で表示を変える

導入

「ログイン中なら名前を、そうでなければログインボタンを」のように、条件によって表示を切り替えるのはよくある処理です。JSX の中では三項演算子や && を使います。

説明

isOn という state の真偽で表示を切り替えます。

function App() {
  const [isOn, setIsOn] = React.useState(false);
  return (
    <div style={{ fontFamily: "system-ui" }}>
      <button onClick={() => setIsOn(!isOn)}>
        スイッチ: {isOn ? "ON" : "OFF"}
      </button>
      {isOn ? (
        <p style={{ color: "green" }}>点灯しています</p>
      ) : (
        <p style={{ color: "gray" }}>消えています</p>
      )}
      {isOn && <p>（ONのときだけ、この行が見えます）</p>}
    </div>
  );
}

• {条件 ? A : B} … 条件が真なら A、偽なら B を表示します。
• {条件 && A} … 条件が真のときだけ A を表示（偽なら何も出ない）。
• setIsOn(!isOn) … 現在の値を反転させてトグルします。

やってみよう

ボタンの背景色を、ON のとき緑・OFF のとき灰色に切り替えてみましょう（style={{ background: isOn ? "#dcfce7" : "#f1f5f9" }}）。