React-Native - undefined is not an object" (evaluating 'this.state.*) _renderRow

Question

I am trying to call the state inside the _renderRow() function but I keep receiving the following error:

This is my source code:
Source code

 var Store = require('./store/Store.js');
 var MessageOptions = require('./MessageOptions.js')

 var React = require('react');
 var ReactNative = require('react-native');
 var {
   AppRegistry,
   Image,
   ListView,
   StyleSheet,
   Text,
   View,
 } = ReactNative;


var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})

 class Application extends React.Component {
   constructor(props) {

   super(props);

   this.state = {
      selectedRowID: 20,
      dataSource: ds
   }
}


componentWillMount() {

  this.getNewMessages();
}


getNewMessages() {

   Store.getMessages().then((messages) => {

       this.setState({
         dataSource: this.state.dataSource.cloneWithRows(messages)
       });

   },(reason) => {

       console.log("Error:", reason);
   });
}


_renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {

  var currentSelectedRowID = this.state.selectedRowID;
  return (

        <View>
           <View style={styles.row}>
              <Image style={styles.thumb} source={require('../android/app/src/main/res/mipmap-hdpi/ic_launcher.png')} />
              <Text style={styles.text}>
                 {rowData.text}
              </Text>
           </View>
           <MessageOptions optionsData={rowData.options} message_uri={rowData.uri}/>
        </View>

   )
}


render() {
  return (
     <ListView
       dataSource={this.state.dataSource}
       renderRow={this._renderRow}
     />
  )
}
};


var styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: 'white',
  },
  thumb: {
    width: 64,
    height: 64,
  },
  text: {
    flex: 1,
  },
  news_item: {
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 15,
    paddingBottom: 15,
    marginBottom: 5
  },
   news_item_text: {
    color: '#575757',
    fontSize: 18
  }
});


module.exports = Application;

The error is coming from the _renderRow method where I am storing this.state.selectedRowID to the var currentSelectedRowID.

Thanks in advance.

Answer 1

Solution
The problem was with my ES6 class constructor:

class Application extends React.Component {
  constructor(props) {

   super(props);
   this._renderRow = this._renderRow.bind(this);

   this.state = {
      selectedRowID: 20,
      dataSource: ds
   }
}

The solution was to add the following line to my constructor:

this._renderRow = this._renderRow.bind(this);