How to use stopPropagation() with Next.js?

I am trying to use stopPropagation so my dropdown menu will close after I click on any other elements.

When I try to use stopPropagation & updating a boolean state the button re-render the page (which reset the state back to ‘false’) than updating the state to true and it stuck on "true" no matter what.

I wrote a code for an example:

import { useEffect, useState } from "react";

export default function IndexPage() {
  const [state, setState] = useState(false);

  useEffect(() => {
    document.body.addEventListener("click", () => {
      setState(false);
    });
  });

  const onButtonClick = (e) => {
    e.stopPropagation();
    setState(!state);
  };

  console.log(state);

  return (
    <div>
      <button onClick={onButtonClick}>Click</button>

      <h1>{state ? "true" : "false"}</h1>
    </div>
  );
}

This problem seems to appear only with Next.js

I wrote the same code with React app and there is no problem.

Next.js codesandbox link

React codesandbox link

1 thought on “How to use stopPropagation() with Next.js?”

Leave a Comment