0

I'm making an API request in a method in my React component and want to pass that data as props. My original attempt was to get the API data in this method, return it, and then pass the return value. That was this: 

<Window selectionData={this.parseWindowData(selection)}>

And the handler was:

function parseWindowData = selection => {

const url = this.state.apiResults.filter(resultObj => resultObj.name === selection)[0].url

return axios.get(url).then(res => res.data

I tried it both with and without 'return'. Without return, it was undefined. Fine. WITH return, I got this:

enter image description here

I so why is the prop a resolved promise rather than just the PromiseValue? It's the right object and everything. Very confused.

JammyDodger
  • 67
  • 8
  • exactly, if you return a promise, you get a promise - just like if you return a string, you get a string – Jaromanda X Mar 21 '18 at 02:09
  • Yes, returning a promise gives you a promise. [Promises are not magically](https://stackoverflow.com/a/22562045/1048572) unwrapped/awaited upon using them as function return values. It's just an object. – Bergi Mar 21 '18 at 02:12
  • It makes sense that returning a Promise gives you a promise object. It makes less sense to me that without explicitly returning the promise -- i.e., having the last line in the method be `axios.get(url).then(res => res.data` -- returns 'undefined', but if I console.log() that res.data the data i'm looking for gets logged. Basically, I'm wondering if I can access that res.data data without setting it on state or assigning it to a variable in outer scope or whatever – JammyDodger Mar 21 '18 at 02:30
  • 1
    Just use `.then(data => console.log(data))` – Bergi Mar 21 '18 at 02:43

0 Answers0