addEventListener on React - Cookie Pop Up Bar

Question

Im doing a cookie pop up bar for my reactjs web site but im getting this error :

TypeError: Cannot read property 'addEventListener' of null

  const cookieContainer = document.querySelector(".cookie-container");
  const cookieButton = document.querySelector(".cookie-btn");

  cookieButton.addEventListener("click", () => {
    cookieContainer.classList.remove("active");
    localStorage.setItem("cookieBannerDisplayed", "true");
  });

  setTimeout(() => {
    if (!localStorage.getItem("cookieBannerDisplayed")) {
      cookieContainer.classList.add("active");
    }
  }, 2000);

  return (
    <div class="cookie-container">
      <p>
        We use cookies in this website to give you the best experience on our
        site and show you relevant ads. To find out more, read our
        privacy policy and cookie policy.
      </p>

      <button class="cookie-btn">
        Okay
      </button>
    </div>
  );
}

I tried to use onClick but im getting this: Line 7:9: 'handlerListener' is assigned a value but never used no-unused-vars

import './App.css';

function App() {

  const cookieContainer = document.querySelector(".cookie-container");

  const handlerListener = () => {
    cookieContainer.classList.remove("active");
    localStorage.setItem("cookieBannerDisplayed", "true");
  };

  setTimeout(() => {
    if (!localStorage.getItem("cookieBannerDisplayed")) {
      cookieContainer.classList.add("active");
    }
  }, 2000);

  return (
    <div class="cookie-container" onClick={() => this.handlerListener}>
      <p>
        We use cookies in this website to give you the best experience on our
        site and show you relevant ads. To find out more, read our
        privacy policy and cookie policy.
      </p>

      <button class="cookie-btn">
        Okay
      </button>
    </div>
  );
}

export default App;

Answer 1

You can use the use useRef() hook of react, for more information for more information take a look at Documentation. Also, you should put it in the useEffect() or in componentWillMount(), It depends if you use classes or functions in your components, for more information Documentation.

In the case that you use functions, in your component:

  const cookieContainer = useRef(null);
  const cookieButton = useRef(null);

  const handlerListener = () => {
      cookieContainer.current.classList.remove("active");
      localStorage.setItem("cookieBannerDisplayed", "true");
  }

  useEffect(() => {
      cookieButton.current.addEventListener("click", handlerListener );
      setTimeout(() => {
          if (!localStorage.getItem("cookieBannerDisplayed")) {
              cookieContainer.current.classList.add("active");
          }
      }, 2000);
      return(
         cookieButton.current.removeEventListener("click", handlerListener );  
      );
  },[]);

  return (
    <div class="cookie-container" ref={cookieContainer}>
      <p>
        We use cookies in this website to give you the best experience on our
        site and show you relevant ads. To find out more, read our
        privacy policy and cookie policy.
      </p>

      <button class="cookie-btn" ref={cookieButton}>
        Okay
      </button>
    </div>
  );
}

Note that in the useEffect() I put a return which will be executed when the component is unmounted, in this way we clean the event listener.

Aunque todo podria ser mas simple si usas el atibuto onClick, Documentation

<button onclick={handler}>
  boton
</button>

I hope I can help you, good luck!

EDIT

You also can try something like this using findDOMNode:

1) import ReactDOM from 'react-dom'
2) const modalRef = useRef(null)
3) <div ref={modalRef}>
4)  useEffect(() => {
        if (modal) {
            const modalCloseBoton = ReactDOM.findDOMNode(modalRef.current).querySelector(".content a");
            function handlerClick() {
                setModal(false)
            }
            modalCloseBoton.addEventListener('click', handlerClick)
            return () => {
                modalCloseBoton.removeEventListener('click', handlerClick)
            }
        }
    })

Answer 2

You need to put the code inside componentDidMount. Alternatively of you are using functional component . You need to put the code inside use effect hook.