Why is onClick not shown in Element?

Question

This is my React code:

<button 
    className="show-all"
    onClick={() => { console.log("button clicked");}}>
    button  
</button>

This is what rendered in the browser:

<button class="show-all">button</button>

I am so curious: Why is the onclick missing? This will not affect the function, but I just cannot see the onclick name.

The following code has the same problem.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

function shoot(){
  console.log("shoot")
}

function handleClick(e) {
  e.preventDefault();
  console.log('The link was clicked.');
}

class ShowAlert extends Component {
  showAlert() {
    alert("I'm an alert");
  }

  render() {
    return <button onClick={this.showAlert}>show alert</button>;
  }
}

ReactDOM.render(
  <>
    <button onClick={() => console.log("good")}>
      Click 1
    </button>

    <button onClick={shoot}>
      Click 2
    </button>

    <button onClick={handleClick}>
      Click 3
    </button>

    <ShowAlert />
  </>
  ,
  document.getElementById('root')
);

And I don't know if this small uncomfortable point is worth discussion.

Answer 1

React implements a synthetic events system that brings consistency and high performance to React apps and interfaces. It achieves consistency by normalizing events so that they have the same properties across different browsers and platforms.

A synthetic event is a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

It achieves high performance by automatically using event delegation. In actuality, React doesn’t attach event handlers to the nodes themselves. Instead, a single event listener is attached to the root of the document. When an event is fired, React maps it to the appropriate component element.

Resource - https://blog.logrocket.com/a-guide-to-react-onclick-event-handlers-d411943b14dd/