Pass data from callback to React component?

Question

I'm rendering a react component that needs data that returns asynchronously. How should I pass this to the react component when it returns from the callback?

currently in render function:

var dataToReturn; 
asynchCall(args, function(err, results) {
  dataToReturn = results;
})

return (
    <MyComponent data={dataToReturn} />
)

This of course is not working out because the data has not returned yet. If I move the render into the callback, that seems like a bad programming pattern. Is there anything in the React API meant for this use case?

thank you!

Brigand · Accepted Answer · 2015-02-04 22:41:39Z

3

Yes, like @Fouad said:

var NewComponent = React.createClass({ 
    componentDidMount: function() {
       asynchCall(args, function(err, results) {
          this.setState({data: results});
       }.bind(this));
    },

    return (
        <MyComponent data={this.state.data} />
    )
});

Also, check out documentation page Load Initial Data via AJAX

edited Feb 4, 2015 at 22:41

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

answered Feb 2, 2015 at 20:41

Artsiom Miklushou

7669 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brigand Over a year ago

But to be clear, do this in componentDidMount, and bind the callback so this.setState doesn't mean window.setState.

Artsiom Miklushou Over a year ago

@FakeRainBrigand yeah, you are right, thank you. I have corrected my answer.

Fouad · Accepted Answer · 2015-02-02 19:30:07Z

2

Instead of local variables you should use this.state & this.setState which will trigger a re-render. Check out this link on fetching from the server http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server

answered Feb 2, 2015 at 19:30

Fouad

433 bronze badges

Collectives™ on Stack Overflow

Pass data from callback to React component?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related