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

Question

Gist: Dashboard.js
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?

Answer 1

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}/>