"undefined is not an object" this.state not getting bound

Question

My react-native component, which I'm creating via React.createClass, does not seem to be binding the this keyword correctly, preventing me from accessing this.state. Here's the error I get:

And the code is below. I don't see anything essentially different from the examples on the website, so I can't figure out what I'm doing wrong. How can I fix this?

'use strict';

var React = require('react-native');

var Main = React.createClass({
  getInitialState: () => {
    return { username: '', isloading: false, iserror: false };
  },
  handleChange: (event) => {
    this.setState({
      username: event.nativeEvent.text
    });
  },
  handleSubmit: (event) => {
    this.setState({
      isloading: true
    });
    console.log('Submitting... ' + this.state.username);
  },
  render: () => {
    return (
      <View style={styles.mainContainer}>
        <Text> Search for a Github User</Text>
        <TextInput style={styles.searchInput}
                   value={this.state.username}
                   onChange={this.handleChange.bind(this)} /> 
        <TouchableHighlight style={styles.button}
                            underlayColor='white'
                            onPress={this.handleSubmit.bind(this)} /> 
        <Text style={styles.buttonText}> SEARCH</Text>
      </View>
    );
  }
});

var { Text, View, StyleSheet, TextInput, TouchableHighlight, ActivityIndicatorIOS } = React;

var styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#48BBEC'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center',
    color: '#fff'
  },
  searchInput: {
    height: 50,
    padding: 4,
    marginRight: 5,
    fontSize: 23,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 8,
    color: 'white'
  },
  buttonText: {
    fontSize: 18,
    color: '#111',
    alignSelf: 'center'
  },
  button: {
    height: 45,
    flexDirection: 'row',
    backgroundColor: 'white',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
});

module.exports = Main

Answer 1

The problem is the use of the ES6 fat arrow in render: () => { that will cause the autobind features that React supplies in the .createClass function not to work.

Simply changing this to render: function() {.. should do the trick if you don't want to convert your code to ES6 classes.

If you do convert it to ES6 classes, take a look at this

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance. You'll have to explicitly use .bind(this) or arrow functions =>.