react/jsx-no-bind: how to pass args from callbacks?

[alex35mil]

I have a question about react/jsx-no-bind rule in 3.0.0: how can I pass args to handler from callback if I can't use bind and arrow functions?

doSomething(thing) { ... }

render() {
  const { items } = this.props;

  return (
    <ul>
    {
      items.map(item => (
        <li onClick={this.doSomething.bind(this, item)} /> // <--- JSX props should not use .bind()
        <li onClick={() => this.doSomething(item)} />      // <--- JSX props should not use arrow functions
      ))
    }
    </ul>
  );
}

[ljharb]

With this rule, you'd not be able to do either. In this case, however, I'd think you'd want to use a single onClick on the <ul> though, and use the event's target (ie, event delegation) so that you have 1 handler instead of N - which also neatly bypasses this issue.

I suspect that in all cases where this rule seems problematic, there will be a more ideal approach that obviates the problem.

[alex35mil]

So in most of the cases suggestion is to save the data to the DOM and fetch it from there via e.target, is this correct?

[ljharb]

Ah, that's a fair point. you may not want to do that either. You could use the index of the <li> to look it up in this.props.items, but that seems a bit janky.

Can you be a bit more specific about your use case? I'm curious what prompts this to come up.

[geekjuice]

There are some tips in the eslint-plugin-react#jsx-no-bind documentation.

tl;dr, you can create another React component for the list items where you pass in the item and the click handler and pass the item as a param.

[ljharb]

@geekjuice thanks, that's very helpful!

[geekjuice]

If you still want to do it inline, it's possible to use something like to _.partial or

function partial(fn, ...args) {
  return fn.bind(fn, ...args);
}

React.createClass({
  handler(item) {
    // do something
  },

  render() {
    const {items} = this.props;
    return items.map(item => {
      return <div onClick={partial(this.handler, item)} />;
    });
  }
});

This will pass through the linter, but will still have the issues listed in eslint-plugin-react#jsx-no-bind documentation.

[ljharb]

Right - at that point you might as well disable the rule.

[alex35mil]

I guess another React component is the best solution with this rule enabled. Thanks, guys, closing this.

[Kerumen]

Just came up with this issue for the "new" way of passing ref. Instead of a string you should now use arrow functions: https://facebook.github.io/react/docs/more-about-refs.html

A recent commit in the plugin introduces flexibility with the rule and allow arrow functions in ref attributes.

Can you add this?

[ljharb]

That link says "Also note that when writing refs with inline function expressions as in the examples here, React sees a different function object each time so on every update, ref will be called with null immediately before it's called with the component instance." - it still seems to me that it's an antipattern to create functions in the render path.

[Kerumen]

Okey then how should I create refs? Like this?

mapRef(c) {
  this._input = c;
}

render() {
  <input ref={::this.mapRef} />
}

[ljharb]

:: is just the same as this.mapRef.bind(this) so no, you'd do this.mapRef = this.mapRef.bind(this) in the constructor, and then just ref={this.mapRef} in render.

[Kerumen]

I wanted to keep it short and avoid the constructor declaration.
Does this affect performance to create functions in render or it's only for design pattern reasons?

[ljharb]

If you're using this then you can't/shouldn't avoid the constructor.

It affects performance significantly, because react's DOM diffing can't use === to compare prop values when you create a new function on every render.