Using querySelector in React

Question

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

I don't see an element with class header-links in your JSX. And try to use hook useRef instead of querySelector . — Alexandr
– Alexandr, Commented Oct 18, 2020 at 9:24

Dark Knight · Accepted Answer · 2020-10-18 09:37:53Z

1

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

edited Oct 18, 2020 at 9:37

answered Oct 18, 2020 at 9:28

Dark Knight

6,6211 gold badge22 silver badges40 bronze badges

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

3 Comments

komarnytskiyIvan Over a year ago

Thanks! I edited dash to underscore but it didnt solve my problem

Dark Knight Over a year ago

@Alexandr, also i'm just a beginner in this, if anything is wrong, you're welcome to edit the answer.

Alexandr Over a year ago

@JitendraYadav Only one thing is critical in your code: every render of the Header component will add a new event listener. You should clean up excess ones. See docs reactjs.org/docs/hooks-effect.html#effects-with-cleanup

Alexandr · Accepted Answer · 2020-10-18 09:43:54Z

0

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

answered Oct 18, 2020 at 9:43

Alexandr

5222 silver badges11 bronze badges

3 Comments

Alexandr Over a year ago

And don't forget to add removeEventListener

komarnytskiyIvan Over a year ago

Thanx but i completely dont know how it works((( i need to read documentation

Alexandr Over a year ago

It is normal! But read documentation reactjs.org/docs/hooks-effect.html#effects-with-cleanup and try to understand. Good luck with your studies! ;-)

Collectives™ on Stack Overflow

Using querySelector in React

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related