title: React Button Click Event Not Firing - One Button Works, One Button Doesnt
body: <p>I am hoping someone can help me.  I have two buttons in a react component. They both call the same javascript function.  One button works whereas the other button does not. Can anyone help me explain what is going on?</p>
  
  <p>I have simplified the code to the smallest unit demonstrating the problem.</p>
  
  <p>Here is the "react.buttonClickComponent.js" file:</p>
  
  <pre><code>class ButtonClick extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      componentDidMount() {
          console.log("componentDidMount");
      }
  
      buttonClickLaser = () =&gt; {
          console.log("buttonClickLaser()");
      }
  
      render() {
          console.log("inside render");
  
          return (
              &lt;div&gt;
                  &lt;button onclick={this.buttonClickLaser} &gt;Button 1 - Doesnt Work&lt;/button&gt;
  
                  &lt;button class="btn btn-default" onClick={this.buttonClickLaser}&gt;Button 2 - This Button Works! &lt;span class="glyphicon glyphicon-fast-forward"&gt;&lt;/span&gt;&lt;/button&gt;
  
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>I am expecting both buttons to call the function buttonclickLaser() but Button 1 does not work!</p>
  
  <p>Here is the HTML file that calls the react component:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"&gt;&lt;/script&gt;
      &lt;script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
      &lt;script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
      &lt;script type="application/javascript" src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="application/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/babel" src="react.buttonClickComponent.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;  
      &lt;div id="app"&gt;&lt;/div&gt;
  
      &lt;script type="text/babel"&gt;
  
          $(document).ready(function () {
              console.log("document loaded");
              ReactDOM.render(&lt;ButtonClick /&gt;, document.getElementById('app'));
          });
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>