Larney Larney - 3 months ago 50
React JSX Question

React-Native state is undefined "undefined is not an object"

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

enter image description here

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

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);