Why is onClick not shown in Element?

user_9355534 0
Viewed 1708

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.

reactjs
3 Answers

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/

user_73626920

As pointed out in the comments to the question and the previous answer, React does not render events in the DOM, so they are not shown in the HTML elements.

I would like to add that if you just want to inspect the React events you can use devtools for that.

For example, for Firefox, MDN provides nice instructions on how to inspect events in devtools, and here is an example for Chrome.

user_130992430

This feature is what I like most, unlike Angular. This is not just about listeners, but also props. React handles the DOM virtually, so everything works virtually than having them in real DOM.

I had the same question in previous days and I noted: why is it so? Just continue reading for what I found specific in React.

You might also surprise why className renders class in the HTML? I mean, you might confuse why class is shown, but not onclick?

In JavaScript, class conflicts with the keyword class and it has a different name, i.e., className. React JSX just works like JavaScript and it binding the class in HTML.

Similar to className, there is htmlFor to the for attribute. You can see for in the rendered HTML like you see class for className.

So, when a React element is rendered in the browser it will only show the HTML attributes, but not React props.

There is onclick in JavaScript and onClick is specific to React (however, React internally transforms it to onclick as pointed out in other answer - synthetic event) and thus onClick is not shown in the DOM when it renders. React updates and works in a virtual DOM.

The only thing you need to note that - do provided props match a DOM attribute case sensitively? If yes, it will show in rendered HTML. Otherwise, No.

I hope, you have now a better understanding about these.

If you would like to see attached listener and props, etc. then you can use React devtools.

user_21387520
Related