I have the following code getting a twitter timeline in a react ponent:

  ponentWillMount: function() {
    twitter.get('statuses/user_timeline',
    function(error, data) {
      this.setState({tweets: data})
     });
  }

But I can't set the state there, because this isn't set to the ponent in that callback function.

How can I set the state within that callback?

n.b. console.log(data) instead of this.setState works fine, which is why I suspect the problem is with the this variable.

I have the following code getting a twitter timeline in a react ponent:

  ponentWillMount: function() {
    twitter.get('statuses/user_timeline',
    function(error, data) {
      this.setState({tweets: data})
     });
  }

But I can't set the state there, because this isn't set to the ponent in that callback function.

How can I set the state within that callback?

n.b. console.log(data) instead of this.setState works fine, which is why I suspect the problem is with the this variable.

• javascript
• callback
• reactjs
• this

3 Answers 3

You can set this with .bind method like this, and call twitter.get in ponentDidMount as in this example

ponentDidMount: function() {
   twitter.get('statuses/user_timeline', function(error, data) {
      this.setState({tweets: data})
   }.bind(this)); // set this that refers to you React ponent
}

Never perform ajax call in ponentWillMount.

Do it in ponentDidMount.

Also there is a scope problem, for that use what Alexander suggest (bind). Another possibility is:

ponentDidMount: function() {
    var self = this;
    twitter.get('statuses/user_timeline', function(error, data) {
        self.setState({tweets: data})
    });
}

Also more details here http://facebook.github.io/react/tips/initial-ajax.html (already underlined by klimo in ments)

There are 2 ways by putting it inside ponentDidMount, you can solve the issue :

1. Bind this scope to the function

.bind(this)

twitter.get('statuses/user_timeline', function(error, data) {
   this.setState({tweets: data})
}).bind(this);

2. Use fat arrow

=>

twitter.get('statuses/user_timeline', (error, data) => {
   this.setState({tweets: data})
});