title: React Functional Component: How to access variables from outside useEffect()
body: <p>I have simplified the issue below, I'm using the <code>useEffect</code> to ensure the dom has rendered before selecting the items, which works great and doesn't need a timeout before trying to get these elements, but then if I want to use these values in another component how do I access them?</p>
  
  <p>The <code>printAll()</code> function cant find the variables.</p>
  
  <pre><code>import React, { useEffect } from 'react';
  
  const Warning: React.FC = () =&gt; {
    useEffect(() =&gt; {
      const confirm = document.getElementById("confirm");
      const invalid = document.getElementById("invalid");
      const confirmed = document.getElementById("confirmed");
      const warningBar = document.getElementById("warning-bar");
    }, []);
  
    function printAll () {
      console.log(confirm);
      console.log(invalid);
      console.log(confirmed);
      console.log(warningBar);
    }
  
  printAll()
  
    return (
      &lt;div&gt;
        &lt;section className='warning-bar' id='warning-bar'&gt;
          &lt;div className='confirm' id='confirm'&gt;Confirm&lt;/div&gt;
          &lt;div className='invalid' id='invalid'&gt;Invalid&lt;/div&gt;
          &lt;div className='confirmed' id='confirmed'&gt;Confirmed&lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;
    );
  };```
  </code></pre>