title: HowTo: componentDidMount and onclick javascript issue
body: <p>So, I have button clicks which are programmatically activated on componentDidMount. The issue I'm having is that because there are multiple button clicks this is causing the desired outcome of one of the intended clicks, which updates a Prisma database, to be completely skewed. </p>
  
  <p>What I want to happen is for <code>updateItem</code> to be triggered once when the page is loaded. What's the best way to achieve this?:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>componentDidMount(){          
  document.getElementById("updateItemButton").click();
  document.getElementById("toggleCartButton").click();
  }
  
  
      render() {
          return (
          &lt;Query query={SINGLE_ITEM_QUERY} variables={{ id: this.props.itemid }}&gt;
  
                  return (
                      &lt;Mutation mutation={TOGGLE_CART_MUTATION}&gt;
                          {(toggleCart) =&gt; {
                              return (
                                  &lt;Mutation
                                  mutation={UPDATE_ITEM_MUTATION}
                                  variables={{
                                      id: this.props.itemid,
                                      quantity: itemDetails.quantity - this.props.quantity, 
                                  }}
                                  refetchQueries={[{ query: CURRENT_USER_QUERY }]}
                                  &gt;
                                  {(updateItem, { loading, error }) =&gt; (
                                      &lt;&gt;
                                      &lt;div&gt;&lt;button type="button" hidden id="updateItemButton" disabled={loading} onClick={updateItem} /&gt;&lt;/div&gt;
                                      &lt;div&gt;&lt;button type="button" hidden id="toggleCartButton" disabled={loading} onClick={toggleCart} /&gt;&lt;/div&gt;
                                      &lt;/&gt;
                                  )}
                                  &lt;/Mutation&gt;
                              );
                          }}
                      &lt;/Mutation&gt;
                  );
              }}
          &lt;/Query&gt;
          );
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried </p>
  
  <blockquote>
    <p>onclick={(x) => {x}}</p>
  </blockquote>
  
  <p>but this only caused the functions not to fire at all.</p>