# Working with External Data in React | kirupa.com **URL:** \ **Category:** programming\ **Created:** [March 20, 2017, 10:32am UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244 "2017-03-20T10:32:12Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 20, 2017, 10:32am UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/1 "2017-03-20T10:32:12Z")
by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 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 [http://www.kirupa.com/react/working\_with\_external\_data.htm](http://www.kirupa.com/react/working_with_external_data.htm) ---
**Author:** ![wuppimon](https://avatars.discourse-cdn.com/v4/letter/w/e5b9ba/32.png) [@wuppimon](https://forum.kirupa.com/u/wuppimon)\ **Post date:** [December 14, 2017, 4:24pm UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/2 "2017-12-14T16:24:43Z")
Dear Kirupa & co, thanks for another great lesson! 😀 ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 16, 2017, 3:09am UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/3 "2017-12-16T03:09:18Z")
Glad you liked it 🙂 ---
**Author:** ![Tiyberius](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tiyberius/32/8888_2.png) [@Tiyberius](https://forum.kirupa.com/u/Tiyberius)\ **Post date:** [December 25, 2017, 10:04pm UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/4 "2017-12-25T22:04:18Z")
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!!! 🙏 ---
**Author:** ![taggie05](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/taggie05/32/8849_2.png) [@taggie05](https://forum.kirupa.com/u/taggie05)\ **Post date:** [December 30, 2017, 4:29am UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/5 "2017-12-30T04:29:50Z")
Thanks Kirupa this has been really helpful I was wondering if I wanted to add a header to this how would I do it? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 30, 2017, 6:01am UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/6 "2017-12-30T06:01:07Z")
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. ---
**Author:** ![mungojam](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mungojam/32/8953_2.png) [@mungojam](https://forum.kirupa.com/u/mungojam)\ **Post date:** [January 22, 2018, 7:21pm UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/7 "2018-01-22T19:21:43Z")
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. ---
**Author:** ![mungojam](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mungojam/32/8953_2.png) [@mungojam](https://forum.kirupa.com/u/mungojam)\ **Post date:** [January 22, 2018, 7:32pm UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/8 "2018-01-22T19:32:43Z")
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. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [January 24, 2018, 1:44am UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/9 "2018-01-24T01:44:22Z")
Using `this` would work! Have you tried it? You should place it in the constructor. ---
**Author:** ![mungojam](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mungojam/32/8953_2.png) [@mungojam](https://forum.kirupa.com/u/mungojam)\ **Post date:** [January 25, 2018, 10:25pm UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/10 "2018-01-25T22:25:39Z")
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. ---
**Author:** ![Douara](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/douara/32/9399_2.png) [@Douara](https://forum.kirupa.com/u/Douara)\ **Post date:** [December 8, 2018, 6:18pm UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/11 "2018-12-08T18:18:44Z")
What about using ES6 promises? 🙂 ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 10, 2018, 5:29am UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/12 "2018-12-10T05:29:51Z")
It will totally work! If you used the `fetch` API, you are basically using a version of that 🙂 ---
**Author:** ![Ollie\_Williams](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ollie_williams/32/9609_2.png) [@Ollie\_Williams](https://forum.kirupa.com/u/Ollie_Williams)\ **Post date:** [August 9, 2021, 10:56am UTC](https://forum.kirupa.com/t/working-with-external-data-in-react-kirupa-com/636244/13 "2021-08-09T10:56:38Z")
Would love to see this rewritten using fetch() and hooks