title: JQuery .click only working every 2nd click
body: <p>I am using JQuery with ReactJS. When clicking on the button, the first click does nothing. However, on the second click the action I am trying to achieve does work. But it's an every other click win.</p>
  
  <p>I've tried adding <code>$(document).ready()</code> inside of the <code>openSubscriptionModalFromButton</code> function. This doesn't fix the issue. </p>
  
  <p>I am for sure passing in <code>openSubscriptionModalFromButton</code> to my components.</p>
  
  <p>I've researched .click on Jquery docs, and I've also read the articles saying to not use Jquery in React ;). </p>
  
  <p>** In the landing component, the button I want Jquery to click (see id)</p>
  
  <pre><code>&lt;button
   id="right-top-corner-button_upgrade"
  &gt;
   UPGRADE/LANDING
  &lt;/button&gt;
  </code></pre>
  
  <p>** In the Toolbar - a modal pops up to ask if you want to upgrade. </p>
  
  <pre><code> openSubscriptionModalFromButton() {
    $('#right-top-corner-button_upgrade').click() 
    this.closeDialog() // closes the Modal pop-up on after the click
   }
  </code></pre>
  
  <p>** In the Modal from Toolbar</p>
  
  <pre><code>&lt;button
   onClick={() =&gt; props.openSubscriptionModalFromButton()}
  &gt;
   Upgrade/Toolbar
  &lt;/button&gt;
  </code></pre>
  
  <p>Right now I'm just console logging 'click' and on the 2'click' (second click), it works. </p>
  
  <p>I'm expecting the upgrade/toolbar button to open the modal on every click, instead of every other. </p>
  
  <p>Appreciate any help. Thank you!</p>