На действия пользователя реагируют через обработчики событий — функции, передаваемые в пропсы вроде onClick, onChange, onSubmit:
function Toggle() { const [on, setOn] = useState(false); return ( <button onClick={() => setOn(!on)}> {on ? "Вкл" : "Выкл"} </button> ); }
Обратите внимание: в onClick передают саму функцию (onClick={handle}), а не её вызов (onClick={handle()} — это ошибка, функция выполнится сразу при рендере).
Часто обработчик выносят отдельно для читаемости:
function handleClick() { setOn(!on); } return <button onClick={handleClick}>...</button>;
Обработчик получает объект события e, как в обычном DOM: e.target.value, e.preventDefault() и т. д.