Урок 8 · React

onClick вызывает функцию компонента

Компонент уже умеет хранить state. Кнопка — самый прямой способ его поменять.

Почему это следующий шаг

Ветки и проверка чужой правки остаются в Git. В интерфейсе React следующее действие — реакция на клик.

Как сделать

В кнопке укажи onClick={increase}. Функция вызывает setCount. Не вызывай increase() прямо в разметке: скобки запустят её во время отрисовки. Текст кнопки бери из состояния, чтобы число на экране совпало с ним.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Что проверить

• Клик увеличивает число на экране.
• Функция не вызывается сама при отрисовке.
• У кнопки есть текст, не пустой прямоугольник.