Solution

You'll hold one boolean in useState and let it drive the class, the aria-checked value, and the label together.

The mental model

A switch is a single boolean. The mistake is to treat "the knob position", "the green track", "the aria state", and "the On/Off text" as four things to keep in sync. They're one thing — on — rendered four ways. Flip the boolean and React re-renders everything derived from it.

A first attempt

A common first try reaches for the DOM to flip the class directly:

export default function App() {
  function handleClick(e) {
    e.currentTarget.classList.toggle('on'); // imperative DOM poke
  }
  return <button className="switch" onClick={handleClick}><span className="knob" /></button>;
}

It even looks right — the knob slides. But there's no state, so aria-checked stays false forever (screen readers now lie), the status text can't update, and any other part of the component that needs to know "is it on?" has no way to ask. In React the class should be a consequence of state, not the state itself.

The working solution

import { useState } from 'react';
import './styles.css';

export default function App() {
  const [on, setOn] = useState(false);

  return (
    <main className="container">
      <h1>Toggle Switch</h1>

      <div className="row">
        <span id="notifications-label" className="label">Notifications</span>
        <button
          type="button"
          className={on ? 'switch on' : 'switch'}
          role="switch"
          aria-checked={on}
          aria-labelledby="notifications-label"
          onClick={() => setOn((v) => !v)}
        >
          <span className="knob" />
        </button>
      </div>

      <p className="status" aria-live="polite">{on ? 'On' : 'Off'}</p>
    </main>
  );
}

on is the single source of truth. The onClick flips it with a functional update (v => !v, robust even if clicks batch). Everything visible is derived: className gets on (CSS slides the knob and greens the track), aria-checked={on} keeps assistive tech honest, and the status text reads the same boolean. No DOM poking, no duplicated state.

Walking through one interaction

• Load: on = false → className="switch", aria-checked={false}, status "Off". Knob left, track grey.
• Click: setOn(v => !v) → on = true → re-render → className="switch on" (knob slides right, track green), aria-checked={true}, status "On".
• Click again: back to false. Each click toggles the one boolean.

Gotchas

• Toggling the class imperatively — classList.toggle desyncs aria-checked and the label. Drive the class from state instead.
• aria-checked="true" as a string — pass the boolean (aria-checked={on}); React serialises it correctly, and a stale string breaks the switch semantics.
• A <div> switch — a plain div isn't focusable or announced. Use a <button role="switch"> so keyboard and screen-reader support come for free.

Going further

• Controlled prop — accept checked + onChange props so a parent can own the state (the <input type="checkbox"> pattern).
• Keyboard — a <button> already toggles on Space/Enter; add Left/Right handling to match the full APG switch pattern.
• Disabled state — add a disabled prop and native disabled attribute when the setting cannot be changed.

Alternative solutions

import { useReducer } from 'react';
import './styles.css';

export default function App() {
  const [on, toggle] = useReducer((value: boolean) => !value, false);

  return (
    <main className="container">
      <h1>Toggle Switch</h1>
      <div className="row">
        <span id="notifications-label" className="label">Notifications</span>
        <button
          type="button"
          className={on ? 'switch on' : 'switch'}
          role="switch"
          aria-checked={on}
          aria-labelledby="notifications-label"
          onClick={toggle}
        >
          <span className="knob" />
        </button>
      </div>
      <p className="status" aria-live="polite">{on ? 'On' : 'Off'}</p>
    </main>
  );
}