Passing axios data from a utility file to a component

Question

In my React app I'm using axios to return data from an API.

api-helper.js

export const getData = async () => {
    axios
        .get(API_DOMAIN)
        .then(response => {
            const resp = response.data;
            console.log(resp);
        })
        .catch(error => console.log('get error', error));
};

In the console log, the JSON data is returned correctly:

{
"content": {
"code": "CAT33",
"name": "Death Star ",
"slug": "death-start-",
"trustFriendlySlug": false,
"description": "",
"facetFilters": [
...// additional data

However, in my parent component when I try to use this data in ComponentDidMount, It is returning an HTML string instead of the JSON data:

data: "<!DOCTYPE html>↵<html lang="en">↵  <head>↵    
headers: {accept-ranges: "bytes", connection: "keep-alive", content-encoding: "gzip", content-type: "text/html; charset=UTF-8", date: "Fri, 08 Jan 2021 15:49:27 GMT", …}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCreden

parentComponent.js

import { getData } from '../../utils/api-helper';


class parentComponent extends Component {
    constructor(props) {
        super(props);

                this.state = {
                   content: {
                     code: '',
                     name: '',
                     facetFilters: [],
                   },
               };

    componentDidMount() {
        axios.get(getData()).then(result => {
            console.log('result', result);
            this.setState({ result });
        });
    }
}

I thought using axios.get in componentDidMount along with the request from my api-helper would display the same result. What is the correct way to import data. I've looked at examples such as How to get valid JSON response from axios library using nodeJS & Can't set state in react

However, unlike those answers, I am trying to pass the data down from my parent component into other components. What is the correct way to handle this data?

you are doing `axios.get(getData())`, you already have an `axios.get` inside `getData()`, just check what `getData()` returns, plus return in that function, or pass the api_domain instead of `getData()` in componentDidMount — Nicolae Maties, Jan 08 '21 at 16:02

score 1 · Accepted Answer · answered Jan 08 '21 at 16:00

1

you first need to return inside your helper function then on your component did mount await the response and set that to state

export const getData = async () => {
let resp
   await axios
        .get(API_DOMAIN)
        .then(response => {
            resp = response.data;
            console.log(resp);
        })
        .catch(error => console.log('get error', error));
return resp
};

componentDidMount() {
async function fetchInitial(){

const resp = await getData()
console.log(resp)
}
fetchInitial()
}

answered Jan 08 '21 at 16:00

Rob Terrell

2,398
1
14
36

1

for some reason, this returned my data in the helper function as ```undefined```. However, I rewrote the helper function and used your solution for componentDidMount to finally get it working. Thanks so much for your help. – Noble Polygon Jan 08 '21 at 16:17
1

glad i could help. yeah I couldn't test my solution as thoroughly as I wouldve liked since I don't know what api you're pulling from, but as long as you were able to come out with a solution. – Rob Terrell Jan 08 '21 at 16:19

Passing axios data from a utility file to a component

1 Answers1