title: React onClick event calls API twice
body: <p>I have a simple React component, a button and a function which calls an API endpoint. When I click the button the API inside event gets called twice. I have read many posts here on stackoverflow and tried all of them but still have same issues. 
  Moreover, even though I can see 2 records in db for each call, in the Google Dev tools shows only 1 xhr call which is wired. </p>
  
  <p>I have already tried to pass function reference instead of function itself and even called function via () => {  } but same result. </p>
  
  <p><code>&lt;button type="button" onClick={ this.onSubmitForm }&gt;Save&lt;/button&gt;</code></p>
  
  <pre><code>onSubmitForm = (e) =&gt; {
      // e.preventDefault();
  
      const response = axios.post('http://localhost/util/index.php/api/record', {name: 'test'} );
      console.log(response) // Even this line is logged once in console ;
  
  }
  </code></pre>