React Events explained, briefly.

React by Wikipedia definition (also known as React.js or ReactJS) is an open-source JavaScript library for building user interfaces or UI components.

Many web applications are built now using this JavaScript library. Let’s look at one critical aspect of React: Events.

An event is a user driven JSX callback which can be used to trigger any change in a React Component.

Here is a simplified example taken from the React API:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback    this.handleClick = this.handleClick.bind(this);  }

  handleClick() {    this.setState(state => ({      isToggleOn: !state.isToggleOn    }));  }
  render() {
    return (
      <button onClick={this.handleClick}>        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

This React component, Toggle has the state isToggleOn, which is declared using the prototype class method. this.isToggleOn is the state of Toggle which changes in the function handleClick.

Within the function handleClick, this.SetState uses this.SetState to change the state of (this.isComponentOn).