Higher-order event handlers

A higher-order function is a function that returns a new function. Sometimes, higher-order functions take functions as arguments too. In the Getting component data example, you used bind() to bind the context and argument values of your event handler functions. Higher-order functions that return event handler functions are another technique. The main advantage of this technique is that you don't have to call bind() several times. Instead, you just call the function where you want to bind parameters to the function. Let's look at an example component:

import React, { Fragment, Component } from "react";

export default class App extends Component {
  state = {
    first: 0,
    second: 0,
    third: 0
  };

  onClick = name => () => {
    this.setState(state => ({
      ...state,
      [name]: state[name] + 1
    }));
  };

  render() {
    const { first, second, third } = this.state;

    return (
      <Fragment>
        <button onClick={this...