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
How to render one component in another component in React JS? React Props React JS Blog CRUD operation How to get a clicked HTML element in React? Display JSON Data in React JS React Static Website with Material UI theme How to use arrow function in React stateless components? State and Props in React React JS onClick event handler Loop inside React JSX