javascript - Currying event handlers in React - Stack Overflow

I am trying to write a (curried?) onChange event handler on a Component that will receive a key argument which will let it know which key in the state object to update. The code won't pile, saying 'key' is not defined.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: null,
      lastName: null
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (key) = (event) => {
    console.log(key, event);
  }

  render() {
    return (
      <div>

        <form>
          <input onChange={this.handleChange('firstName')} value={this.state.firstName} />
          <input onChange={this.handleChange('lastName')} value={this.state.firstName} />
        </form>

        {JSON.stringify(this.state, null, 4)}
      </div>
    );
  }
}

I am trying to write a (curried?) onChange event handler on a Component that will receive a key argument which will let it know which key in the state object to update. The code won't pile, saying 'key' is not defined.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: null,
      lastName: null
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (key) = (event) => {
    console.log(key, event);
  }

  render() {
    return (
      <div>

        <form>
          <input onChange={this.handleChange('firstName')} value={this.state.firstName} />
          <input onChange={this.handleChange('lastName')} value={this.state.firstName} />
        </form>

        {JSON.stringify(this.state, null, 4)}
      </div>
    );
  }
}

• javascript
• reactjs
• functional-programming
• currying

Share Improve this question Follow asked May 11, 2017 at 13:11 NoobOfNoobsNoobOfNoobs 7511 silver badge55 bronze badges 10

• 16 handleChange = (key) => (event) => – madox2 Commented May 11, 2017 at 13:13
• why you are making it so plex, use this: onChange={(e) => this.handleChange('firstName', e)} then use handleChange like this: handleChange(key, e){console.log(key, e)} – Mayank Shukla Commented May 11, 2017 at 13:17
• @madox2 Thanks! I can't believe I missed that. – NoobOfNoobs Commented May 11, 2017 at 13:30
• 5 @MayankShukla Because using a callback there means that a function is created every re-render, which means more work for the garbage collector (or so I am told). Also I wanted to learn about currying! – NoobOfNoobs Commented May 11, 2017 at 13:32
• 1 @hazardous: I'm curoious - where do you draw the line between a function factory and currying? The code written by the OP seems pretty much identical to the accepted answer on the "what is currying" question you linked (minus the arrow functions). – Joe Clay Commented May 11, 2017 at 13:53

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 3

You have to pass both the event as well as the key on the OnChange handler.

Do this

<input onChange={this.handleChange.bind(this,'firstName')} value={this.state.firstName} />

And the onChange should be

 handleChange = (key, event) => {
    console.log(key, event);
  }

This will allow both the event and key to be passed and the function will work.

I think that in your code you have just forgotten to put the arrow function after initializing first function name:

handleChange = (key) = [!!! HERE - should be an arrow !!!] (event) => {
  console.log(key, event);
}

Try to use this:

handleChange = (key) => (event) => {
  console.log(key, event);
}

So this way your first function which has the param key will return another function with param event.