問題一覧に戻る
初級状態管理
問題22: 真偽値のstate

真偽値stateを使ってトグル機能を実装します。表示/非表示の切り替えや、状態に応じたボタンテキストの変更を学びます。

import React, { useState } from 'react';

function Toggle() {
  // 真偽値stateを宣言
  const [isVisible, setIsVisible] = useState();

  // トグル関数
  const toggle = () => setIsVisible(isVisible);

  return (
    <div>
      <button onClick={toggle}>
        {isVisible  "非表示"  "表示"}
      </button>
      {/* 条件付き表示 */}
      {isVisible  <p>表示中のコンテンツ</p>}
    </div>
  );
}

export default Toggle;
···