Fix the issue in the following React code.

Problem:

Even after clicking Disable, pressing the Enter key still increments the counter.

import React, { useEffect, useEffectEvent } from "react";

function App() {
  const [count, setCount] = React.useState(0);
  const [enabled, setEnabled] = React.useState(true);

  const onKeyDown = useEffectEvent(() => (e) => {
    if (e.key === "Enter" && enabled) {
      setCount((c) => c + 1);
    }
  });

  useEffect(() => {
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setEnabled((e) => !e)}>
        {enabled ? "Disable" : "Enable"}
      </button>
    </div>
  );
}

export default App;

Problem:

Companies

Topics