ReactJS – “undefined is not an object” this.state is not bound

'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) => {< br /> this.setState({
 isloading: true
 });
 console.log('Submitting... '+ this.state.username);
 }, 
 render: () => {
 return (
 
  Search for a Github User
  value={this.state.username}
 onChange={this.handleChange.bind(this)} /> 
  underlayColor='white'
 onPress={this.h andleSubmit.bind(this)} /> 
  SEARCH
 
 );
 }
});

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,
 f lexDirection:'row',
 backgroundColor:'white',
 borderColor:'white',
 borderWidth: 1,
 borderRadius: 8,
 marginBottom: 10, 
 marginTop: 10,
 alignSelf:'stretch',
 justifyContent:'center'
 },
});

module. exports = Main

The react-native component I created through React.createClass does not seem to bind the this keyword correctly, preventing me from accessing this.state. This is the error I get:

The code is as follows. I don’t see any substantial difference from the examples on the website. So I can’t figure out what I did wrong. How can I Can solve this problem?

'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) => {< br /> this.setState({
 isloading: true
 });
 console.log('Submitting... '+ this.state.username);
 }, 
 render: () => {
 return (
 
  Search for a Github User
  value={this.state.username}
 onChange={this.handleChange.bind(this)} /> 
  underlayColor='white'
 onPress={this.han dleSubmit.bind(this)} /> 
  SEARCH
 
 );
 }
});

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,
 fle xDirection:'row',
 backgroundColor:'white',
 borderColor:'white',
 borderWidth: 1,
 borderRadius: 8,
 marginBottom: 10, 
 marginTop: 10,
 alignSelf:'stretch',
 justifyContent:'center'
 },
});

module. exports = Main

The problem is to use the ES6 fat arrow in the rendering: ()=> {This will lead to the automatic adjustment function provided by React in the .createClass function Doesn’t work.

Just change it to render: If you don’t want to convert your code to ES6 classes, the function(){.. should solve the problem.

If you do convert it to ES6 classes, please check 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 =>.