この解答例は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
です。