How to handle events using expressions inside JSX?
The App component returns a button to the content and used the onClick prop to tell React how to respond when the click event is triggered. The button element is configured using the onClick prop, which tells React to invoke the calculate method in response on the click event.
Example
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
len: 4,
bre: 5,
area: 0
}
}
calculate = () => this.setState({ area: this.state.len * this.state.bre});
render = () =>
<span class="d-block p-2 bg-dark text-white">
<button className="btn btn-info m-2" onClick={ this.calculate }>
Click Me
</button>
Calculate Area: { this.state.area }
</span>
}
export default App;
Most Helpful This Week
What is state in React?
How to pass an Argument to a Method used inside JSX expression?
Getting Started with React and Hello World Example
Loop inside React JSX
React JS update Div content on click
React JS get Tag Name and Inner Text on Click
Glyphicon Rating Star component
Working with Forms, Inputs and onChange Events in ReactJs
Example of React JS with Material UI components
State and Props in React