Working with External Data in React |

by kirupa | 2 December 2016

Dealing with external data is pretty much standard in web apps today. This "dealing" typically looks as follows:

This is a companion discussion topic for the original entry at

Dear Kirupa & co, thanks for another great lesson! :grinning:

1 Like

Glad you liked it :slight_smile:

Really great stuff here Kirupa. In 2 days I’ve gone from a total React NOOB to ready to tackle all the other tricky tutorials on the web and build out my first React app. Huge thank you!!! :pray:

1 Like

Thanks Kirupa this has been really helpful I was wondering if I wanted to add a header to this how would I do it?

You can just create a Header component, create the HTML/CSS that will define how the header looks (inside your render method usually), and just instantiate the component where you are constructing your entire page.

Loving the lessons! I’ve pre-ordered the next version of your book. I would personally name the callback processResponse rather than processRequest as I think it is clearer, but I’m being picky and others may not agree.

A bigger issue I have now hit. It seems to use a global xhr variable. My javascript is very rusty, but if I want to make it non global, is simply adding this. before all of them the way to go?

I could added it to the state, but presumably that would be silly as it would never be passed down.

Using this would work! Have you tried it? You should place it in the constructor.

Thanks, yes it did work. I think I put it in the componentdidmount method. Now reading various things about which is the better place to initialise things.

What about using ES6 promises? :slight_smile:

It will totally work! If you used the fetch API, you are basically using a version of that :slight_smile:

1 Like