title: Calling "document.getElementByID" in React Component vs. "ref"
body: <p>I am trying to open a modal by changing the style properties of the modal, so it is visible. I works perfectly when I write a function like this:</p>
  
  <pre><code>modalAction(action) {
          switch (action) {
              case "open": {
                  const modal = document.getElementById("login-popup");
                  modal.style.opacity = 1;
                  modal.style.visibility = "visible";
              }
  
          }
      } 
  </code></pre>
  
  <p>Yet I have never seen react code like this. Insead I read a lot about refs that use Code like this:</p>
  
  <pre><code>&lt;div className="login-popup" ref={(ref) =&gt; {this.loginPopup = ref}} id="login-popup"&gt;
  </code></pre>
  
  <p>But as far as I see it using refs will only alow me to access a virtual DOM elements in the same (or nested) components. The modal is a component of itself and is not nested it is calles in.</p>
  
  <p>I could solve my problem using redux but writing a reducer-case as well as an action and producing an additional piece of state seems overkill for my sort of problem.</p>
  
  <p><strong>How can I access the modals style properties the right way if the modal is neither nested nor in the same component where it is called from?</strong> Thx</p>