reactjs - how to add click event listener in javascript in react js?

Question

can you please help how to add click event listener in react-project without using react - onClick attribute. I want to use only native javascript.

I tried like this

document.addEventListener("DOMContentLoaded", function (event) {
  console.log("====");
  console.log(document.querySelector(".btn"));
  document.querySelector(".btn").addEventListener(
    "click",
    function () {
      alert("-----");
    },
    false
  );
});

it is not working alert is not showing .can you please help me where i doing wrong.

https://codesandbox.io/s/angry-shadow-1c4v8?file=/src/App.js:76-340

I know using react we can acheive this but I don't want to use reactjs click event I want to use native javascript and update the state.

below solution not working when I am using dangerouslyInsertHTML

here is my code https://codesandbox.io/s/angry-shadow-1c4v8?file=/src/App.js

question from:https://stackoverflow.com/questions/65623013/how-to-add-click-event-listener-in-javascript-in-react-js

Answer 1

you must register event listener in React Hooks

try this

import React, { useEffect, useState, useRef } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  const buttonEl = useRef(null);
  useEffect(() => {
    console.log(counter);
  }, [counter]);

  useEffect(() => {
    const alertFunc = function () {
      alert("-----");
    }
    const buttonRef = buttonEl.current;
    buttonRef.addEventListener(
      "click",
      alertFunc,
      false
    ); 
    // Specify how to clean up after this effect:
    return function cleanup() {
      buttonRef.removeEventListener("click", alertFunc, false)
    };
  })
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button className="btn" ref={buttonEl}> set countor</button>
    </div>
  );
}

I register listener in hooks, and when the component will unmount I remove the listener