this value is null in function (React-Native)

Question

As per local testing, 'this' seems to be null inside the row render function. As a result this prevents me from binding a local function on the onPress prop.

I have this render block:

render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            renderHeader={this._renderHeader} 
            style={styles.listView} />
    );
}

and a local function

_visitEntryDetail() {
    console.log('test');
}

then row render

_renderRow(something) {
    return (
        <TouchableHighlight
            style={[styles.textContainer, filestyle.container]} 
            onPress={this._visitEntryDetail.bind(this)} >
            <View>
                <Text style={filestyle.text1} >{something.detail}</Text>
                <Text style={filestyle.text2} >{something.size}, {something.timestamp}</Text>
            </View>
        </TouchableHighlight>
    );
}

This returns

message: null is not an object (evaluating 'this.$FileList_visitEntryDetail')"

checking "this" on renderRow returns null when replacing code above with:

_renderRow(file) {
    console.log(this);
    return (
        <TouchableHighlight
            style={[styles.textContainer, filestyle.filelistcontainer]} 
             >

with following console output:

RCTJSLog> null

but is fine when

render() {
    console.log('inside render. this value is below me');
    console.log(this);
    return (
        <ListView

console

RCTJSLog> "inside render. this value is below me"
RCTJSLog> [object Object]

Can someone please point out what's causing this. Thanks.

Answer 1

this is null because _renderRow has not been binded to the current class. Please keep in mind:

In constructor, you need to explicitly bind a function, if you want to pass it to any react component, as sometimes it doesn't bind implicitly.

This statement applies to any function being passed to the component. For example, you want to call a function callThisFunction on pressing TouchableHighlight. You can bind it by:

class SomeComponent extends Component {

  constructor(props) {
    super(props)

    //binding function
    this.renderRow = this.renderRow.bind(this)
    this.callThisFunction = this.callThisFunction.bind(this)
  }

  renderRow() {
    console.log(this) //not null now
    return (
      <View>
        <TouchableHighlight onPress={this.callThisFunction}>
          <Image source={require('image!prev')}/>
        </TouchableHighlight>
      </View>
    )
  }

  callThisFunction() {
    console.log(this) //not null now
  }
}

Answer 2

An alternative to NightFury's solution would be to use ES6 Arrow Function syntax without having to manually bind the function in the constructor. Your render() would then look like this:

render() {
    return (
       <ListView
           dataSource={this.state.dataSource}
           renderRow={() => this._renderRow()}
           renderHeader={() => this._renderHeader()} 
           style={styles.listView} />
    );
}

Answer 3

If you want to pass function to a 3rd party component always pass functions like that:

        <Carousel
          renderItem={item => this._renderItem(item)}
        />

When you bind function like that, it didnt lose function instance in other classes