reactjs - Cannot read property 'addEventListener' of null using javascript in react?

Question

I am trying to use native javascript in react to bind event .Actually I am getting some HTML from server .I am using dangerouslySetInnerHTML to set HTML .Now I want to bind a click event in incoming HTML from server here is my code https://codesandbox.io/s/angry-shadow-1c4v8?file=/src/App.js

 useEffect(() => {
    const alertFunc = function () {
      alert("-----");
    };
    document.querySelector(".btn").addEventListener("click", alertFunc, false);
    // Specify how to clean up after this effect:
    return function cleanup() {
      document
        .querySelector(".btn")
        .removeEventListener("click", alertFunc, false);
    };
  });

question from:https://stackoverflow.com/questions/65624096/cannot-read-property-addeventlistener-of-null-using-javascript-in-react

Answer 1

This issue is because of your template - <button className="btn">set countor </button> is redering like below.

So that if you try to access using class query selector, it will return undefined. You can use class instead of className.

 return {
    __html: '<button class="btn">set countor </button>'
  };

Working Code - https://codesandbox.io/s/brave-meadow-qitjb?file=/src/App.js:87-157