How to bind function for each element in ListView in React Native?

Question

I've rewrite a component from createClass to class definition to fit eslint-react-native linting, then I found I cannot bind function to element in Array as it used to. The former code looks like this:

createClass({
  render() {
    return (
      <ListView style={styles.listView}
        dataSource={this.state.data}
        renderRow={this._renderTopic}
      />
    )
  },
  _renderTopic(topic) {
    return (
      <TouchableHighlight onDelayColor="#dddddd"
        onPress={() => this._jumpTo(topic.id) }
      >
    )
  },
  _jumpTo(id) {
    this.props.navigator.push({
      name: 'Topic page',
      component: Topic,
      passProps: {
       topicId: id,
      },
    });
  }
})

When I change it to class definition:

{
  render() {
    return (
      <ListView style={styles.listView}
        dataSource={this.state.data}
        renderRow={this._renderTopic}
      />
    )
  }
  _renderTopic(topic) {
    return (
      <TouchableHighlight onDelayColor="#dddddd"
        onPress={() => this._jumpTo(topic.id) }
      >
    )
  }
  _jumpTo(id) {
    this.props.navigator.push({
      name: 'Topic page',
      component: Topic,
      passProps: {
       topicId: id,
      },
    });
  }
}

It does not work again. And give an error while press the Touchable: this2._jumpTo is not a function

So I changed it again:

{
  render() {
    return (
      <ListView style={styles.listView}
        dataSource={this.state.data}
        renderRow={this._renderTopic}
      />
    )
  }
  _renderTopic(topic) {
    const nav = this.props.navigator
    let jumpTo = function(id) {
      nav.push({
        name: 'Topic page',
        component: Topic,
        passProps: {
         topicId: topic.id,
        },
      });
    };
    return (
      <TouchableHighlight onDelayColor="#dddddd"
        onPress={jumpTo}
      >
    )
  }
}

This would through error immediately: possible unhandled promise rejection cannot read property _currentElement of null. (Which is strange here, the jumpTo function should be lazy, right?)

So what's the right way to bind an dynamic function to item in ListView?

Are you willing to use ES6? It would make this question trivial — Matthew Herbst
– Matthew Herbst, Commented Apr 6, 2016 at 3:10
@MatthewHerbst Yes, I'm writing ES6, using Babel-eslint and eslint to lint my code. Source code is here: github.com/kxxoling/PythonChina.app Linted code is not commited yet. — Kane Blueriver
– Kane Blueriver, Commented Apr 6, 2016 at 3:14

JamesWatling · Accepted Answer · 2016-04-06 09:33:49Z

4

I think whitep4nther was heading in the right direction, I do the following to get around the binding in the render method

```

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

```

Check out this link from the docs https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

answered Apr 6, 2016 at 9:33

JamesWatling

1,1851 gold badge9 silver badges17 bronze badges

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

3 Comments

Kane Blueriver Over a year ago

I have several renderXX and fetchXX methods here, so I have to bind them multi times. Any good ideas to fix this?

JamesWatling Over a year ago

You should look at using something like lodash, It has a _.bindAll function lodash.com/docs#bindAll

Kane Blueriver Over a year ago

This helps! Thank you!

yachaka · Accepted Answer · 2016-04-06 03:31:42Z

2

With second example, wild guess ?

renderRow={this._renderTopic.bind(this)}

answered Apr 6, 2016 at 3:31

yachaka

5,6291 gold badge27 silver badges35 bronze badges

7 Comments

Kane Blueriver Over a year ago

Not tested, but using bind is not suggested based on eslint-react plugin. github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/… Even this works, I'd rather a better solution.

yachaka Over a year ago

He's talking about your problem right after : github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…. He suggests binding the method in the constructor, which is essentially the same without the need to create a new function in each render.

yachaka Over a year ago

But to be fair, you don't need this kind of optimizations till some point

yachaka Over a year ago

And there is no need to have a "better" solution, this method was specifically created to solve theses kind of problem

yachaka Over a year ago

The answer is in the link you posted earlier, at the bottom in the page ! ;) "Unfortunately React ES6 classes do not autobind their methods like components created with the older React.createClass"

|

shixforever · Accepted Answer · 2016-04-06 09:49:42Z

0

You need to bind this to the method

<ListView
   dataSource={this.state.dataSource}
   renderRow={this._renderTopic.bind(this)}
/>

and add the _renderTopic method in constructor :

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

answered Apr 6, 2016 at 9:49

shixforever

315 bronze badges

Comments

Dmitri Larionov · Accepted Answer · 2019-01-04 20:07:02Z

0

You don't have to bind this if you use the react class constructor and then use arrow functions.

This is possible because arrow functions don't create a closure like functions do.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "Some content"
    };
  }
  clickHandler = event => {
    //handle the click
  };
  render() {
    return (
      <div>
        <p> Some Content </p>
        <button onClick={this.clickHandler}> Click Me</button>
      </div>
    );
  }
}

answered Jan 4, 2019 at 20:07

Dmitri Larionov

6026 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to bind function for each element in ListView in React Native?

4 Answers 4

3 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related