React Axios Call Return Whole Function

Question

I have the below Axios call

 getDetail = () => {
    this.apiGetDetail
      .callApi(description)
      .then(data => {
          return(data.data);
      })
      .catch(error => {
        console.log("Failed");
      });
  };

When I get the returned value from getDetail function, it ends up being undefined every time. I tried to create a variable make value equal to data and return that but that didn't work either. Always it seems to be getDetail gets completed before apiGetDetail API call and return nothing. I attempted to send the data that's returned to the Redux store or local state but that didn't work for React Table set up I have either.

I have below subComponent for the React Table

        SubComponent={row => {
            let myDetail = this.getDetail(
              row.original.cusip,
              row.original.description,
              detailColumns
            );
             return (
              <ReactTable
                data={Array.from(myDetail)}
                columns={detailColumns}
                style={{ height: "400px" }}
                minRows="5"
                noDataText="No Data"
              />
            );
          }}

but it can't be displayed because data comes back as empty.

How can I make sure within getDetail function to wait apiGetDetail call to be returned then return the data value that comes from that??

Edit: I am sure this can be done using async await but I don't know how I can apply that to this set up. I've never done async await before...

@SterlingArcher Such an easy answer ha!? mark it duplicate of a question that has 10 pages long answer.. I know there can be a way to do it by async-await.. I don't know how to implement that over this. If you do, provide an answer so easy marking stuff duplicate! — Extelliqent, Jun 03 '19 at 20:57
The information on the duplicate is hands down some of the best knowledge on asynchronous behavior you'll find on the internet, don't be so quick to discredit it because you think it's too long. — Sterling Archer, Jun 03 '19 at 20:59
@SterlingArcher instead of marking it duplicate moving away you can do what Mauricio Carlezzo did, try to help specific to this case and get reputation help someone. How do I do this? Option1: read this long page, Option2: do this this that. which option is helpful? — Extelliqent, Jun 04 '19 at 13:08

score 1 · Accepted Answer · answered Jun 03 '19 at 21:15

first I think your function getDetail are returning undefined, you should put,

**return** this.apiGetDetail

But in this case, this will return a promise, I think that is not the best approach, so here let myDetail = this.getDetail( you will need to await the promise return, and I think the is not good inside the render method! You can read more about async and await!

But, I think is better if you setState instead return a value directly, for example, where you have return(data.data); you should use this.setState({ myDetail });. And then in render method you can access the value like this.state.myDetail

React Axios Call Return Whole Function

1 Answers1