React.jsでの表示と非表示の切り替え方法

ステートの作成: 表示/非表示の状態を管理するために、Reactのステートを使用します。コンポーネントの状態を表すために、useStateフックを使用することができます。例えば、以下のようにステートを作成します。

import React, { useState } from 'react';
function App() {
  const [isVisible, setIsVisible] = useState(true);
  // ...
  return (
    <div>
      {/* ... */}
    </div>
  );
}

条件付きレンダリング: ステートの値に基づいて、表示または非表示を切り替えるために、条件付きレンダリングを使用します。条件式を使って、表示する要素を決定します。例えば、以下のように条件付きで要素をレンダリングします。

return (
  <div>
    {isVisible && <div>表示する要素</div>}
  </div>
);

イベントハンドラの追加: 表示/非表示を切り替えるために、ボタンなどのイベントハンドラを追加します。イベントハンドラ内でステートを更新することで、表示/非表示を切り替えることができます。例えば、以下のようにイベントハンドラを追加します。

function toggleVisibility() {
  setIsVisible(!isVisible);
}
return (
  <div>
    <button onClick={toggleVisibility}>表示切り替え</button>
    {isVisible && <div>表示する要素</div>}
  </div>
);

これらの手順を実装することで、React.jsで表示と非表示を切り替えることができます。上記のコード例は一例であり、実際の使用に合わせて調整することができます。