この解答例はChatGPTによって生成されています,正しいかは自己判断で。

BFE.devでのAI解答例 - React コーディング問題
7. useToggle()

以下はuseToggle()の実装例です:

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  function toggle() {
    setValue(!value);
  }

  return [value, toggle];
}

export default useToggle;

このuseToggle()フックを使用すると、以下のようになります:

function App() {
  const [on, toggle] = useToggle(false);

  return (
    <div>
      <p>The toggle is {on ? 'on' : 'off'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

on変数は現在のトグル状態を示し、toggle関数はトグル状態を切り替えるために使用されます。useToggle()は初期値を受け取ることができますが、既定値はfalseです。