Skip to content

I am using UseEffect Hook, but still component is getting Uncaught TypeError: Cannot set properties of null. in react

I have to give a hover effect to a certain element that has an id “address-instructions”. I have used UseEffect so that it is only accessed after being rendered, but I still get Uncaught TypeError: Cannot set properties of null (setting ‘onmouseover’) , which indicates that the component is not rendering. Please help. Thank you in advance.

    document.getElementById("address-i").onmouseover = () => {
      document.getElementById("address-instructions").style.display = "block";
    document.getElementById("address-i").onmouseout = () => {
      document.getElementById("address-instructions").style.display = "none";
  }, []);


you can use useRef for the same…

import "./styles.css";
import { useRef } from "react";

export default function App() {
  const h2 = useRef();
  const hideElement = (ref) => { = "none";
  const visibleElement = (ref) => { = "block";
  return (
    <div className="App">
        onMouseOver={hideElement.bind(this, h2)}
        onMouseOut={visibleElement.bind(this, h2)}
        Hello CodeSandbox
      <h2 ref={h2}>Start editing to see some magic happen!</h2>

You can use above code directly on codesandbox.

I hope this will help you! Happy coding…