Declaring handler functions

Let's take a look at a basic component that declares an event handler for the click event of an element:

import React, { Component } from "react";

export default class MyButton extends Component {
  onClick() {
    console.log("clicked");
  }

  render() {
    return <button onClick={this.onClick}>{this.props.children}</button>;
  }
}

The event handler function, this.onClick(), is passed to the onClick property of the <button> element. By looking at this markup, you can see exactly which code will run when the button is clicked.

View the official React documentation for the full list of supported event property names at https://facebook.github.io/react/docs/.

Next, let's take a look at how to respond to more than one type of event using different event handlers with the same element.