title: using getElementByID in React
body: <p>I am getting a &quot;Cannot read property 'style' of null&quot; on my getElementById('password'), but its clearly defined on the page. I'm new to react, and I'm guessing this isn't allowed or something. But I'm trying to have the password page show until, its style is changed to &quot;none&quot;, which happens in a different component.</p>
  <pre><code>function App() {
    const [loggedIn, setLoggedIn] = useState(false)
  
    if (document.getElementById('password').style.display = &quot;block&quot;){
      setLoggedIn(false)
    } else {
      setLoggedIn(true)
    }
  
    return (
      &lt;div className=&quot;app&quot;&gt;
        { //Check if message failed
          (loggedIn)
            ? &lt;div&gt; &lt;Password /&gt; &lt;/div&gt; 
            : &lt;div&gt; 
                &lt;Nav /&gt;
                &lt;div id=&quot;allFiles&quot;&gt;
                  &lt;FileEarth title=&quot;Earth Update&quot;/&gt;
                  &lt;FileMars title=&quot;Mars Rover Update&quot;/&gt;
                  &lt;HardDrvie title=&quot;ASTRO Entertainment&quot;/&gt;
                  &lt;Folder title=&quot;Moon Pics&quot;/&gt;
                &lt;/div&gt;
              &lt;/div&gt; 
        } 
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>