ReactNative - the Tapping line in the ListView gives an error: it is impossible to read the `_pressRow` property of zero

Question

I am creating a small ReactNative + Redux application using ListView . I followed the code example from docs and came up with the following setup. My current implementation is very close to the sample code, but for some reason I get an error when I want to click the list item.

Here are the relevant parts of my code:

JobsRootComponent.js

 class JobsRootComponent extends Component { ... _pressRow(row) { console.log('JobsRootComponent - _pressRow ', row) } ... _renderRow(rowData, section, row) { const title = rowData.title const subtitle = 'by ' + rowData.by return ( <TouchableHighlight onPress={() => this._pressRow(row)}> <View style={styles.cellContainer}> <Text style={styles.cellTitle}>{title}</Text> <Text style={styles.cellSubtitle}>{subtitle}</Text> </View> </TouchableHighlight> ) } ... render() { return ( <ListView style={styles.container} dataSource={this.props.dataSource} renderRow={this._renderRow} /> ) } ... } 

This code looks good to me, but for some reason, when I click on a list item, javacript crashes and displays the following two errors in the chrome dev console:

• Unable to read property _pressRow of null
• JS _pressRow Exception: _pressRow not read _pressRow of null property

In my opinion, this means that the object whose _pressRow property was click-targeted is actually null . But should this object not be my JobsRootComponent ? Why could it be null at this moment?

Answer 1

After some searching, I came across this tutorial that describes how to implement a simple ToDo application that helped me solve the problem myself.

The problem was how I assigned _renderRow renderRow -property << 22>: instead of just doing renderRow={this._renderRow} I needed to use the javascript bind() function: renderRow={this._renderRow.bind(this) .

For reference, here is what my render() method looks like:

 render() { return ( <ListView style={styles.container} dataSource={this.props.dataSource} renderRow={this._renderRow.bind(this)} /> ) }