Breaking News: Grepper is joining You.com. Read the official announcement!

passing event handler to useEffeect

Disgusted Dotterel answered on September 30, 2020 Popularity 8/10 Helpfulness 3/10

answer passing event handler to useEffeect

passing event handler to useEffeect

Comment

const App =() => {
  const [userText, setUserText] = useState("");

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(`${userText}${key}`);
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [userText]); // ESLint will yell here, if `userText` is missing

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: handler javascript

Link to this answer
Share Copy Link