title: Why is document.getElementById() returning null when there is an element with that Id?
body: <p>I'm trying to build a navbar in React that has a child component <code>Menu</code> that renders one of two different versions of the menu depending on the width on the div that the Menu is rendered inside.  There is also a logo and company name that take up a relatively constant amount of width in the navbar and the div that holds the menu grows and shrinks to adjust for screen width and aspect ratio changes.  Anyway, that div that grows and shrinks I gave an <code>id="menu-section"</code> so that I could use <code>document.getElementById("menu-section").offsetWidth;</code> to grab the available width and use that in the function that decided which version of the menu to render.  The trouble is I get a <code>TypeError: Cannot read property 'offsetWidth' of null</code>.  Why would the <code>document.getElementById("menu-section")</code> be failing to find the div and returning null?</p>
  
  <pre><code>function Menu(props) {
      let availableWidthPx = document.getElementById("menu-section").offsetWidth;
      if (availableWidthPx &gt; 600) {
          return expanded version;
      }
      return collapsed version
  }
  
  function Navbar(props) {
      render(){
          return (
              &lt;nav className="navbar"&gt;
                  ...
                  &lt;div id="menu-section"&gt;
                      &lt;Menu /&gt;
                  &lt;/div&gt; 
              &lt;/nav&gt;
          )
      }
  }
  export default Navbar;
  </code></pre>