Why onClick is not rendered for html a?

Question

Have following code:

<a
  className={"a_2"}
  onClick={() => {
    alert(

But final HTML contains no onclick, why?

<a class="a_2"></a>

Answer 1

React's events are what are known as Synthetic Events.

Your event handlers will be passed instances of SyntheticEvent, 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.

In other words, react does not map exactly to plain HTML and JavaScript because most of the dom manipulation is handled in the React DOM (VDOM) rather than by the browser's regular DOM.

Answer 2

You can use the button also you can use <a> like

<a
  className={"a_2"}
   onClick={(e) => {
      e.preventDefault();
      alert("Your alert message");
      }
   }
></a>

Answer 3

According to the document :

Your event handlers will be passed instances of SyntheticEvent, 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.

The default behavior of an anchor is to refresh the page, must prevent default behavior with :

e.preventDefault()

also can remove the href or use href='javascript:void(0)'

so anchor tag can use this way:

<a
  className={"a_2"}
   onClick={(e) => {
      e.preventDefault();
      alert("message");
      }
   }
></a>

or

const callMe = ()=>{
alert("message")
}
  <a href='javascript:void(0)' onClick={callMe}>
              some text
            </a>

for seeing events can use the Event Listeners tab under the Elements tab in the developer tools