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
How to create Functional Component?
onMouseDown and onMouseUp Event handling in ReactJs
React Components
How to set property values using expression?
Using this keyword access component properties and methods
How to render raw HTML content in React JS?
Working with Forms, Inputs and onChange Events in ReactJs
React JS onClick event handler
Create React App
React JS Count number of checkboxes are checked