Example of how to use partial application to pass parameters to event handlers in React

react-event-handler-papp-props.jsx

// with props
import React, { Component } from 'react';

// this method work as a our base `handleClick` function
function handleClick(name, event) {
  alert(`hello ${name}`);
}

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = handleClick.bind(this, props.name);
  }

  // if the prop `name` change re bind the `handleClick`
  componentWillReceiveProps(nextProps) {
    if (nextProps.name !== this.props.name) {
      this.handleClick = handleClick.bind(this, nextProps.name);
    }
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        hola mundo
      </div>
    );
  }
}

react-event-handler-papp-state.jsx

// with state
import React, { Component } from 'react';

// this method work as a our base `handleClick` function
function handleClick(name, event) {
  alert(`hello ${name}`);
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Platzi' };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = handleClick.bind(this, this.state.name);
  }

  // if the state `name` change re bind the `handleClick`
  componentWillUpdate(nextProps, nextState) {
    if (nextState.name !== this.state.name) {
      this.handleClick = handleClick.bind(this, nextState.name);
    }
  }
  
  handleChange(event) {
    this.setState({ name: event.target.value });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          click me!
        </button>
        <input
          type="text"
          value={this.state.name}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}