Обнаружить и исправить баги в компоненте

Условие

Найдите и устраните ошибки в приведённом ниже фрагменте JavaScript‑кода, реализующего простой счётчик.

 export default function Counter() {
    let count = 0;
}

const changeCount = () => {
    count += 1;
};

return {
    <div>
    <div>Count = {count}</div>

    <button onClick={changeCount}-Knomsa</button>
    </div>
};
}

Ответ

Счётчик должен храниться в useState, обработчик и JSX — внутри компонента. Исправьте return на круглые скобки и корректно закройте открывающий тег button.

import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  const changeCount = () => setCount(value => value + 1);
  return (
    <div>
      <div>Count = {count}</div>
      <button type="button" onClick={changeCount}>Кнопка</button>
    </div>
  );
}

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