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);
    };
  });

Sarun UK · Accepted Answer · 2021-01-08 06:05:36Z

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

answered Jan 8, 2021 at 6:05

Sarun UK

6,7667 gold badges26 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user944513 Over a year ago

it is showing error when I am printing value of counter codesandbox.io/s/serene-wright-vbeqf?file=/src/App.js

Sarun UK Over a year ago

try this - codesandbox.io/s/fervent-booth-c7l66

mccallofthewild · Accepted Answer · 2021-01-08 06:06:38Z

1

It's because your HTML isn't HTML. It's JSX. className is a JavaScript-only attribute.

Instead of:

<button className="btn">set countor </button>

You need:

<button class="btn">set counter</button>

answered Jan 8, 2021 at 6:06

mccallofthewild

5202 silver badges7 bronze badges

1 Comment

user944513 Over a year ago

it is showing error when I am printing value of counter codesandbox.io/s/serene-wright-vbeqf?file=/src/App.js

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related