title: TypeError: Cannot read properties of undefined (reading 'addEventListener') in react.js
body: <p>I want to change the header background when scrolling, but the problem is there that react doesn't know <code>addEventListener</code>.</p>
  <p>If I change <code>window</code> to <code>document</code>  there is not any error but the <code>console.log(window.scrolly)</code> is undefined.</p>
  <p>This is all code:</p>
  <pre><code>import React, { Fragment, useState, window, useEffect } from &quot;react&quot;;
  import { Navbar, NavDropdown, Nav, Container } from &quot;react-bootstrap&quot;;
  import classes from &quot;../../styles/header.module.css&quot;;
  import { Icon } from &quot;@iconify/react&quot;;
  export default function header() {
  const [transparentHeader, setHeader] = useState(false);
  
  const listenScrollEvent = () =&gt; {
  console.log(window.scrollY);
  };
  
  useEffect(() =&gt; {
  window.addEventListener(&quot;scroll&quot;, listenScrollEvent);
  
  return () =&gt; window.removeEventListener(&quot;scroll&quot;, listenScrollEvent);
  }, []);
  
  //
  
  return (
  &lt;Fragment&gt;
    &lt;Navbar expand=&quot;md&quot; fixed=&quot;top&quot; className={transparentHeader}&gt;
      &lt;Container&gt;
        &lt;Navbar.Brand href=&quot;#home&quot;&gt;
          &lt;img src=&quot;/header.png&quot;&gt;&lt;/img&gt;
        &lt;/Navbar.Brand&gt;
        &lt;Navbar.Toggle aria-controls=&quot;basic-navbar-nav&quot; /&gt;
        &lt;Navbar.Collapse id=&quot;basic-navbar-nav&quot;&gt;
          &lt;Nav className=&quot;me-auto&quot;&gt;
            &lt;Nav.Link className={classes.navlink} href=&quot;/&quot;&gt;
              Home
            &lt;/Nav.Link&gt;
            &lt;Nav.Link href=&quot;#pricing&quot; className={classes.navlink}&gt;
              About
            &lt;/Nav.Link&gt;
            &lt;NavDropdown
              title=&quot;Services&quot;
              id=&quot;collasible-nav-dropdown&quot;
              className={classes.services}
            &gt;
              &lt;NavDropdown.Item href=&quot;#action/3.1&quot;&gt;Action&lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.2&quot;&gt;
                Another action
              &lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.3&quot;&gt;
                Something
              &lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Divider /&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.4&quot;&gt;
                Separated link
              &lt;/NavDropdown.Item&gt;
            &lt;/NavDropdown&gt;
            &lt;NavDropdown
              title=&quot;Pages&quot;
              id=&quot;collasible-nav-dropdown&quot;
              className={classes.services}
            &gt;
              &lt;NavDropdown.Item href=&quot;#action/3.1&quot;&gt;Action&lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.2&quot;&gt;
                Another action
              &lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.3&quot;&gt;
                Something
              &lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Divider /&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.4&quot;&gt;
                Separated link
              &lt;/NavDropdown.Item&gt;
            &lt;/NavDropdown&gt;
            &lt;NavDropdown
              title=&quot;Blogs&quot;
              id=&quot;collasible-nav-dropdown&quot;
              className={classes.services}
            &gt;
              &lt;Icon icon=&quot;bx:bx-chevron-down&quot; /&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.1&quot;&gt;Action&lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.2&quot;&gt;
                Another action
              &lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.3&quot;&gt;
                Something
              &lt;/NavDropdown.Item&gt;
              &lt;NavDropdown.Divider /&gt;
              &lt;NavDropdown.Item href=&quot;#action/3.4&quot;&gt;
                Separated link
              &lt;/NavDropdown.Item&gt;
            &lt;/NavDropdown&gt;
            &lt;Nav.Link href=&quot;#pricing&quot; className={classes.navlink}&gt;
              Contact
            &lt;/Nav.Link&gt;
          &lt;/Nav&gt;
          &lt;Nav&gt;
            &lt;Nav.Link
              href=&quot;#deets&quot;
              className={(classes.navlink, classes.headerSearch)}
            &gt;
              &lt;Icon icon=&quot;bi:search&quot; /&gt;
            &lt;/Nav.Link&gt;
            &lt;Nav.Link
              href=&quot;#memes&quot;
              className={(classes.navlink, classes.SignIn)}
            &gt;
              Iign In
            &lt;/Nav.Link&gt;
          &lt;/Nav&gt;
        &lt;/Navbar.Collapse&gt;
      &lt;/Container&gt;
    &lt;/Navbar&gt;
  &lt;/Fragment&gt;
  );
  }
  </code></pre>