Using querySelector in React

user_14354525 0
Viewed 1791

querySelector returns null(maybe because element is not created) , I tried event DOMContentLoaded and ReactDOM.findDOMNode

const Header = () => {
  const links = document.querySelector('.header_links')
    window.addEventListener('resize',() => {
      if(window.innerWidth <=1000 ){
        links.classList.remove('hide');
      }
    })
  return (
      <header className="App-header">
        <div className="inner-header">
          <div className="header_links">
          <div className="header_left_links">
            <a href="index.html" className="active">DrukBox</a>
            <a href="printfile.html">Print File</a>
            <a href="history.html">History</a>
            <a href="addpages.html">Add pages</a>
          </div>
          <div className="header_right_links">
            <a href="/">Sign in</a>
          </div>
          </div>
          <BurgerMenu />
        </div>
      </header>
  );
}
reactjs dom javascript
2 Answers

You are using dash(-) instead of underscore(_).

You html JSX contains underscore.

<div className="header_links">

while your querySelector contains dash.

const links = document.querySelector('.header-links')

Modify it to underscore.

Also I agree with @Alexandr, to you useRef if possible.

const Header = () => {
  const refHeaderLink = useRef(null);
  
    window.addEventListener('resize',() => {
      if(window.innerWidth <=1000 ){
        refHeaderLink.current.classList.remove('hide');
      }
    })
  return (
      <header className="App-header">
        <div className="inner-header">
          <div className="header_links" ref={refHeaderLink}>
          <div className="header_left_links">
            <a href="index.html" className="active">DrukBox</a>
            <a href="printfile.html">Print File</a>
            <a href="history.html">History</a>
            <a href="addpages.html">Add pages</a>
          </div>
          <div className="header_right_links">
            <a href="/">Sign in</a>
          </div>
          </div>
          <BurgerMenu />
        </div>
      </header>
  );
}
user_116410290

Or you can use state without refs.

const Header = () => {
  const [isHiddenLinks, setIsHiddenLink] = React.useState(true);

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth <= 1000) {
        setIsHiddenLink(false);
      }
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [isHiddenLinks]);

  return (
    <header className="App-header">
      <div className="inner-header">
        <div className={`header_links ${isHiddenLinks ? "hide" : ""}`}>
          <div className="header_left_links">
            <a href="index.html" className="active">
              DrukBox
            </a>
            <a href="printfile.html">Print File</a>
            <a href="history.html">History</a>
            <a href="addpages.html">Add pages</a>
          </div>
          <div className="header_right_links">
            <a href="/">Sign in</a>
          </div>
        </div>

        <BurgerMenu />
      </div>
    </header>
  );
};
user_73294880
Related