Отладка и исправление багов в React‑компоненте

Условие

Обнаружьте и исправьте ошибки в следующем фрагменте React‑компонента:

 export default function CounterApp()
    let count = 0;

const changeCount = () => {
    count += 1;
    }
return (
    <div className="App">
    <p>'No произойдет при клике по кнопке</p>
    <hi>Count = {count}</hi>
    <button onClick={changeCount}-'кнопка</button>
    </div>
});

Ответ

Исходник содержит синтаксические ошибки, а обычная переменная count не обновляет интерфейс. Исправьте скобки и JSX, затем храните счётчик в useState.

import { useState } from 'react';
export default function CounterApp() {
  const [count, setCount] = useState(0);
  const changeCount = () => setCount(value => value + 1);
  return (
    <div className="App">
      <p>Счётчик нажатий</p>
      <h1>Count = {count}</h1>
      <button type="button" onClick={changeCount}>Кнопка</button>
    </div>
  );
}

После каждого клика React получает новое состояние и рендерит актуальное число. В исходнике отсутствует открывающая фигурная скобка функции, повреждён тег button, hi ошибочно заменяет h1, а закрытие функции не согласовано с объявлением.