ステートによる切り替え

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 25/42。

ステートは数値だけではありません。boolean のステートは、表示と非表示を切り替える標準的なスイッチになります：

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen ? <p>I am visible!</p> : null}

2つのテクニックの組み合わせ：

setIsOpen(!isOpen): ! が真偽値を反転させるため、1つのボタンで開閉の両方を行えます
{condition ? jsx : null}: null をレンダリングすると何も描画されません。要素は非表示になっているのではなく、存在しない状態になります

チャレンジ

中級

スポイラー表示機能を構築します。

初期値が false である真偽値の state revealed を追加します。
ボタン (id="toggle") はクリックされるたびにその値を反転させます。
表示されている（revealed）状態のときは、id="secret" とテキスト The cake is real を持つ <p> を表示し、そうでない場合は null をレンダリング（render）します。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>