Golang React JS Technology Blog

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
Integrate Bootstrap with ReactJS Application React Elements How to pass properties from parent component to child component in React JS? 3 Different Examples - How State Works in React? How to perform computation inside expression using ternary operator? Glyphicon Rating Star component Display JSON Data in React JS Example of React Bootstrap Datatable React Components How to build and use a custom react component from scratch?