React Native loop this

Question

when I put onPress in a map loop, it doesn't work. how to fix it?

var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.push({id: 2,});
  },
  render () {
      return (
        <View>          
          <TouchableOpacity onPress={this._handlePress}> //work here 
          <Text> One </Text>
          </TouchableOpacity>
          <View style={styles.albums}>
          {
            list.map(function(item, index){
              return (
                <TouchableOpacity key={index} onPress={this._handlePress}> //doesn't work hehre
                  <Text>{item}</Text>
                </TouchableOpacity>
              )
            })
          }
            </View>
      </View>
      );
  }
});

Nader Dabit · Accepted Answer · 2016-01-18 18:28:42Z

9

this is referring to the wrong context, you need the scope to be lexically bound, which is what the fat arrow function will do for you.

Try calling your function like this:

onPress={ () => this._handlePress() }

Also, you need to bind the map function to the correct context like this:

<View style={styles.albums}>
  {
    list.map(function(item, index){
       return (
         <TouchableOpacity key={index} onPress={() => this._handlePress()}> 
           <Text>{item}</Text>
          </TouchableOpacity>
       )
     }.bind(this))
   }
</View>

Or like this:

<View style={styles.albums}>
  {
    list.map((item, index) => {
       return (
         <TouchableOpacity key={index} onPress={() => this._handlePress()}> 
           <Text>{item}</Text>
         </TouchableOpacity>
       )
     })
   }
</View>

I set up a working project here.

https://rnplay.org/apps/_PmG6Q

edited Jan 18, 2016 at 18:28

answered Jan 18, 2016 at 17:41

Nader Dabit

53.8k14 gold badges110 silver badges91 bronze badges

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

1 Comment

Alien Over a year ago

thanks for your answer, but get a error undefined' is not an object (evaluating '_this._handlePress') :(

Collectives™ on Stack Overflow

React Native loop this

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related