条件付きレンダー

&& と ? : で、出す・出さないを切り替える

ポイント

JSX の { } の中では if が書けない。代わりに && か ? : を使う
出す・出さないの2択は &&：{isOpen && 中身}
A か B のどちらかを出すときは ? :：{isLoggedIn ? ようこそ : ログインしてください}

試してみよう

import { useState } from "react"

export default function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div style={{ padding: 16 }}>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "閉じる" : "開く"}
      </button>
      {isOpen && <p>ここが開いたときだけ表示されます</p>}
    </div>
  )
}

Open Sandbox

開いたときの文章を、2行に増やしてみよう
閉じているときだけ「閉じています」と表示してみよう（ヒント：!isOpen &&）
最初から開いた状態にしてみよう（ヒント：useState の最初の値）

つまずきポイント

数値を && の条件にすると「0」が表示される

{count && …} で count が 0 のとき、画面に 0 と出てしまう。数値のときは {count > 0 && …} と書く。

!isOpen は「isOpen の反対」

! は true と false を入れ替える。setIsOpen(!isOpen) は「今と反対にする」＝開閉の切り替えの定番。