Golang React JS Technology Blog

onClick Event binding and get event name in ReactJs

Create React App

Type the following command to create a new react app:

npx create-react-app demo

Now, go to the project folder:

cd demo

Now, update default App.js with below code snippet

src\App.js

import React, { Component } from 'react';
 
class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick = (event) => {
      alert(event.type);
  }
 
  render() {
    return (
      <div>
        <div className="text-center">
          <button className="btn btn-secondary" onClick={this.handleClick}>
            Click Me
          </button>
        </div>
      </div>
    );
  }
}
 
export default App;
Most Helpful This Week
onMouseDown and onMouseUp Event handling in ReactJs How to render raw HTML content in React JS? Check which Radio button is Selected or Clicked What is JSX? How to get a clicked HTML element in React? Getting Started with React and Hello World Example