Reactで表示・非表示を動的に切り替える方法

Reactで表示・非表示を動的に切り替える方法

Reactで表示・非表示を動的に切り替える方法を以下のコード例で説明します。
この例では、ボタンをクリックするとテキストの表示・非表示が切り替わります。

import React, { useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      {/* このボタンをクリックすることでisVisibleの値が反転する */}
      <button onClick={toggleVisibility}>
        {/* ボタンの文言も切り替わる */}
        {isVisible ? '非表示にする' : '表示する'}
      </button>

      {isVisible && <p>このテキストは表示されています。</p>}
    </div>
  );
}

export default App;

上記のコードでは、useStateフックを使用してコンポーネントの状態を管理しています。
isVisibleがtrueの場合、テキストが表示され、falseの場合、テキストは非表示になります。
ボタンをクリックすると、toggleVisibility関数が呼び出され、isVisibleの値が切り替わります。