logo

Coding Activist

HomeQuestionsMachine CodingTech RoadmapProductEmber
JobsSign In

useToggle Hook

EasyReact Hooks15 min7 tests

Implement a reusable useToggle hook that returns the current boolean, a toggle function, and a direct setter, then drive an accessible ON/OFF button and a "Force on" button from it.

Implement a custom hook useToggle(initial = false) that manages a single boolean value, and use it to drive a small UI.

The hook must return a tuple [value, toggle, setValue]:

  • value — the current boolean.
  • toggle — a function that flips value (true → false, false → true) with no arguments.
  • setValue — a function that sets value directly (e.g. setValue(true)).

In the App component, use the hook to power two controls:

1. A toggle button (give it a stable aria-label such as "toggle" so it can be found regardless of its label):

  • Its visible text reads ON when value is true and OFF when value is false.
  • Its aria-pressed attribute is "true" when on and "false" when off.
  • Clicking it calls toggle().

2. A "Force on" button whose text reads Force on. Clicking it calls setValue(true) — turning the switch on, and leaving it on even if it was already on.

Also render an element with role="status" that reports the current state (e.g. the text ON or OFF) so assistive technology announces changes.

The hook is the core of this exercise: keep the boolean in useState inside the hook, derive toggle from the functional updater, and expose setValue directly. The UI is intentionally tiny — it exists only to exercise the hook's behavior.

Requirements

  • Implement useToggle(initial = false) inside App.tsx, returning a [value, toggle, setValue] tuple.
  • toggle() flips the boolean value (no arguments); setValue(next) sets it directly.
  • useToggle defaults to false when called with no argument.
  • Render a toggle button with a stable aria-label (e.g. "toggle") whose text reads "ON" when on and "OFF" when off.
  • The toggle button sets aria-pressed to "true" when on and "false" when off, and calls toggle() on click.
  • Render a "Force on" button that calls setValue(true) on click, turning the switch on (and keeping it on if already on).
  • Render a role="status" element that reflects the current state ("ON"/"OFF").
Hints (6)
  1. Hold the boolean inside the hook with const [value, setValue] = useState(initial), then return [value, toggle, setValue].
  2. Implement toggle with the functional updater so it never goes stale: const toggle = () => setValue(v => !v).
  3. Return the array in a stable order — value first, toggle second, setValue third — and destructure it in App as const [on, toggle, setOn] = useToggle().
  4. The toggle button's text and aria-pressed both come from the same boolean: text is on ? 'ON' : 'OFF', and set aria-pressed={on ? 'true' : 'false'} explicitly as a string.
  5. Give the toggle button a fixed aria-label (e.g. aria-label="toggle") so it keeps the same accessible name even though its visible text flips between ON and OFF.
  6. The "Force on" button just calls setOn(true) — it should turn the switch on regardless of its current state.

Topics

  • React
  • React Hooks

Asked at

Meesho · Amazon · PharmEasy · Razorpay · BrowserStack · Ola

Join Us
blur