undefined is not an object (evaluating 'this.onPress.bind')

Question

I am creating an iOS application with React-Native, I get this error when my Dashboard.js is rendered.

My Dashboard.js renders different scrollableTabView's which each contain a ListView, I have included some code from one list item below.

renderArchiveOrder(order) {
  return (
    <TouchableHighlight onPress={this.onPress.bind(order.id)}>
       <View style={styles.listObject}>
       <View style={styles.thumbnail}>
       <Text style={styles.title}>#{order.bid}</Text>
       <Text style={styles.time}>TID</Text>
       <Text style={styles.subTime}>{order.time}</Text>
     </View>
     <View style={styles.information}>
        <Text style={styles.restaurantName}>{title}</Text>
        <Text style={styles.dropoffName>{order.locations.dropoff.address}</Text>
     </View>
     </View>
    </TouchableHighlight>
    );
  }

My problem is that when Dashboard.js is rendered, the app crashes and the included screenshot is being shown.

It clearly states that renderArchiveOrder: Dashboard.js @ 364:0 is throwing an error, here's my onPress function. I can't understand my error is line 364, and why my TouchableHighlight onPress doesn't work.

id: index is line 364.

onPress = (index) => {
  this.props.navigator.push({
    title: 'Order',
    component: Order,
    passProps: {
      id: index
    }
  })
};

Why does this occur when I'm just trying to send data to a click function and push the navigator to a new view?

Alexandre Kirszenberg · Accepted Answer · 2016-04-08 20:47:37Z

8

+200

Since you're passing your renderArchiveOrder method as a value to another component, it loses its context. Thus, the this variable inside your method will not refer to your component instance, and trying to access this.onPress will yield undefined.

To fix this, simply bind your method to your component instance before passing it to your ListView component:

<ListView
  dataSource={this.state.archiveDataSource}
  renderRow={this.renderArchiveOrder.bind(this)}
  style={styles.listView}/>

answered Apr 8, 2016 at 20:47

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

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

Collectives™ on Stack Overflow

undefined is not an object (evaluating 'this.onPress.bind')

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related