How to avoid using inline functions in React (ES6) for functions that take arguments

Question

I'm trying to follow the suggestion in this react-eslint doc to avoid using inline functions.

I have a div with an onClick funciton like so:

onClick={ () => this.props.handleClick(some_constant) }

This works perfectly fine, however I don't want to have an inline function. When I try to abstract it by following the pattern in the provided link above, I get a setState error that runs infinitely.

class Foo extends React.Component {
  constructor() {
    super();

    this._handleClickWrapper = this.handleClickWrapper.bind(this);
  }

  _handleClickWrapper() {
    // handleClick is a callback passed down from the parent component
    this.props.handleClick(some_constant)
  }

  render() {
    return (
      <div onClick={this._handleClickWrapper}>
        Hello!
      </div>
    );
  }
}

What needs to be done so that I can avoid using inline functions?

Edit:

I made a serious typo, but in my code, I have what is currently reflected and it is still causing the error.

What "setState error that runs infinitely" do you get? I use the pattern you've presented all the time... — Aaron Beall
– Aaron Beall, Commented Feb 8, 2017 at 3:01
I don't really know React, but my first thought is that this doesn't work the same way in arrow functions as in traditional functions. — nnnnnn
– nnnnnn, Commented Feb 8, 2017 at 3:04
onClick={ this.props.handleClick.bind(this, some_constant) } ? — pawel
– pawel, Commented Feb 8, 2017 at 10:46

Rem Lampa · Accepted Answer · 2017-02-08 03:18:58Z

4

You bound the wrong function to this. It should be:

this._handleClickWrapper = this._handleClickWrapper.bind(this);

This way _handleClickWrapper will always be bound to the context of the component.

answered Feb 8, 2017 at 3:18

Rem Lampa

4516 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheRealFakeNews Over a year ago

I made a big mistake. Thanks for the catch, but that's not the cause of the issue.

Rem Lampa Over a year ago

How about passing props? constructor(props) and super(props)

Dounan Shi · Accepted Answer · 2017-11-04 17:29:01Z

If you really really really want to follow the jsx-no-bind rule, you can create a new component and pass someConstant in as a prop. Then the component can call your callback with the value of someConstant:

class FooDiv extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return <div onClick={this.handleClick}>Hello!</div>
  }

  handleClick() {
    this.props.onClick(this.props.someConstant);
  }
}

Then your Foo component can just do this:

class Foo extends React.Component {
  render() {
    const someConstant = ...;
    return (
      <FooDiv
        onClick={this.props.handleClick}
        someConstant={someConstant}
      />
    );
  }
}

Having said that, I would recommend not following jsx-no-bind and just use bind or arrow functions in render. If you're worried about performance due to re-renderings caused by using inline functions, check out the reflective-bind library.

webdeb · Accepted Answer · 2017-02-08 22:38:38Z

0

There is a typo

this._handleClickWrapper = this.handleClickWrapper.bind(this);

should be

this._handleClickWrapper = this._handleClickWrapper.bind(this);

in your constructor you forgot to pass props to super()

constructor(props) {
  super(props);
  this._handleClickWrapper = this._handleClickWrapper.bind(this);
}

Tipp: You can avoid binding (and even the constructor) by using arrow functions declaration inside the class (babel-preset-es2016).

class Foo extends React.Component {

  state = {} // if you need it..

  onClick = () => {
    this.props.handleClick(some_constant)
  }

  render() {
    return (
      <div onClick={this.onClick}>
        Hello!
      </div>
    );
  }
}

This way you components gets smaller, and easier to read.

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

edited Feb 8, 2017 at 22:38

answered Feb 8, 2017 at 22:13

webdeb

13.3k5 gold badges32 silver badges44 bronze badges

2 Comments

TheRealFakeNews Over a year ago

es6 classes don't autobind

webdeb Over a year ago

right, need to include babel-preset-es2016 facebook.github.io/react/blog/2015/01/27/…

Collectives™ on Stack Overflow

How to avoid using inline functions in React (ES6) for functions that take arguments

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related