React this.setState is not a function

Question

I'm new in React and I'm trying to write an app working with an API. I keep getting this error:

TypeError: this.setState is not a function

when I try to handle the API response. I suspect it's something wrong with this binding but I can't figure out how to fix it. Here's the code of my component:

var AppMain = React.createClass({     getInitialState: function() {         return{             FirstName: " "         };     },     componentDidMount:function(){         VK.init(function(){             console.info("API initialisation successful");             VK.api('users.get',{fields: 'photo_50'},function(data){                 if(data.response){                     this.setState({ //the error happens here                         FirstName: data.response[0].first_name                     });                     console.info(this.state.FirstName);                 }              });         }, function(){         console.info("API initialisation failed");          }, '5.34');     },     render:function(){         return (             <div className="appMain">             <Header  />             </div>         );     } }); 

Answer 1

The callback is made in a different context. You need to bind to this in order to have access inside the callback:

VK.api('users.get',{fields: 'photo_50'},function(data){     if(data.response){         this.setState({ //the error happens here             FirstName: data.response[0].first_name         });         console.info(this.state.FirstName);     }  }.bind(this)); 

EDIT: Looks like you have to bind both the init and api calls:

VK.init(function(){         console.info("API initialisation successful");         VK.api('users.get',{fields: 'photo_50'},function(data){             if(data.response){                 this.setState({ //the error happens here                     FirstName: data.response[0].first_name                 });                 console.info(this.state.FirstName);             }          }.bind(this));     }.bind(this), function(){     console.info("API initialisation failed");      }, '5.34'); 

Answer 2

You can avoid the need for .bind(this) with an ES6 arrow function.

VK.api('users.get',{fields: 'photo_50'},(data) => {         if(data.response){             this.setState({ //the error happens here                 FirstName: data.response[0].first_name             });             console.info(this.state.FirstName);         }      });