Prop to pass data to event handlers

[shanimal]

This is a feature request

My suggestion is to add a known prop that gets passed through to all handlers as the second parameter. This would eliminate the need for closures, inline binding, inline arrow functions, proxyEvent.target.dataset, etc.

handleClick(proxyEvent, eventData) {
  // do stuff with eventData...
}
<Component eventData={data} onClick={this.handleClick} />

Currently if we need to pass data through an event handler there are several ways...

Create a class method that returns a closure:

clickHandler(eventData) {
  return (proxyEvent) => {
    // do stuff with eventData
  }
}
<Button onClick={clickHandler(eventData)} />

use inline bind or arrow function

clickHandler(eventData, proxyEvent) {
  // do stuff with eventData
}
<Button onClick={this.clickHandler.bind(this, eventData)} />
<Button onClick={(proxyEvent) => clickHandler(eventData, proxyEvent)} />

AND

A not so intuitive alternative is to use proxyEvent.target.dataset

clickHandler(proxyEvent) {
    const eventData = datas
      .find(data => data.get('id') === proxyEvent.target.dataset.button);
    // do stuff with eventData...
}
<Button onClick={clickHandler} data-button={data.get('id')} />

If you pass an object to any data-prop it gets converted to a string. My immutable Map becomes DOMStringMap {button: "Map { "id": "84280bcc-ab3b-45d5-8882-dc74a17da... so I have to pass an ID and use it in the handler to find my data.

[shanimal]

My point was to have a way to pass data through to the handler and avoid the need for any of the above work arounds. (I should have added HOC's there, which is what I've been doing on a case by case for this situation)

proxyEvent.target.dataset is way too inconsistent. Sometimes the added values are defined, sometimes not. Id never use it in production or "think it was an API" 😂

[beardedtim]

To me, this does not sound like something that react should be focused on as it is an implementation of your specific use-case ( want more information inside a specific closure ) and react already offers boundless ways to do that ( as you listed above ).

It just seems like baking in a use-case when there are tools that solve it already.

[gaearon]

Please direct API change proposals to this repository: https://github.com/reactjs/rfcs

Generally binding or passing a closure is the idiomatic way to do it.