When the button element is clicked, the click event gets triggered, the value of the tagName property can be used to find out HTML element the source of the event and innerText property can be used to find out text written in that HTML element.
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.target.innerText); // Click Me alert(event.target.tagName); // BUTTON } 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
onClick Event binding and get event name in ReactJs
React Components
onMouseDown and onMouseUp Event handling in ReactJs
How to pass an Argument to a Method used inside JSX expression?
How to show hide component on Click in React JS?
How to use onChange and onClick event in React JS?
How to create Functional Component?
How to use React-Bootstrap component?
How to use createElement in React JS?
How to pass properties from parent component to child component in React JS?