title: Why is onClick not shown in Element?
body: <p>This is my React code:</p>
  <pre><code>&lt;button 
      className=&quot;show-all&quot;
      onClick={() =&gt; { console.log(&quot;button clicked&quot;);}}&gt;
      button  
  &lt;/button&gt;
  </code></pre>
  <p>This is what rendered in the browser:</p>
  <pre><code>&lt;button class=&quot;show-all&quot;&gt;button&lt;/button&gt;
  </code></pre>
  <p>I am so curious: Why is the <code>onclick</code> missing? This will not affect the function, but I just cannot see the onclick name.</p>
  <p>The following code has the same problem.</p>
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  
  function shoot(){
    console.log(&quot;shoot&quot;)
  }
  
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  
  class ShowAlert extends Component {
    showAlert() {
      alert(&quot;I'm an alert&quot;);
    }
  
    render() {
      return &lt;button onClick={this.showAlert}&gt;show alert&lt;/button&gt;;
    }
  }
  
  ReactDOM.render(
    &lt;&gt;
      &lt;button onClick={() =&gt; console.log(&quot;good&quot;)}&gt;
        Click 1
      &lt;/button&gt;
  
      &lt;button onClick={shoot}&gt;
        Click 2
      &lt;/button&gt;
  
      &lt;button onClick={handleClick}&gt;
        Click 3
      &lt;/button&gt;
  
      &lt;ShowAlert /&gt;
    &lt;/&gt;
    ,
    document.getElementById('root')
  );
  </code></pre>
  <p>And I don't know if this small uncomfortable point is worth discussion.</p>