How to make a server side data request via react.js

Question

My App component in React.js currently accesses hard-coded data stored in a js variable. I want to instead fetch this piece of data by making a GET or POST request to the python flask server running for the application.

React.renderComponent( <App data={dataset}/>, document.getElementById( "App" ) );

Let's say the data can be accessed by the url /get_dataset.json on python flask. How do alter the code here?

There is nothing specific that React adds for this use case. So you could use whatever tools you like (e.g. jQuery) to make an ajax request, retrieve the data from your endpoint and then call React.renderComponent() w/ the data you have now available. — sthzg
– sthzg, Commented Apr 20, 2015 at 21:04

Austin Greco · Accepted Answer · 2015-04-20 23:36:17Z

3

Assuming you're using jQuery for ajax, you could wait to render the component until after you get the response:

$.get('/get_dataset.json', function(dataset) {
  React.renderComponent( <App data={dataset}/>, document.getElementById( "App" ) );
});

or you could do it inside the component as seen here

answered Apr 20, 2015 at 23:36

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

1 Comment

user3422637 Over a year ago

Logically, this should work. But the React.renderComponent isn't been called from with the $.get() ajax call. I tried passing my good old static data to React.renderComponent from within the $.get() call. Even that did not work.

Collectives™ on Stack Overflow

How to make a server side data request via react.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related