Having trouble with Async/Await Fetching from an API in React

Question

Using React for this first time.
I'm trying to fetch from an api, but it keeps showing up as undefined.
I curl it on my command line and the data is received.

async componentDidMount() {
        const url = "https://covidtracking.com/api/v1/states/current.json";
        const { data } = await fetch(url);

        const modifiedData = data.map( (stateData) => ({
            state: stateData.state,
            pos: stateData.positive,
        }))

        this.setState({ data: modifiedData, loading: false });
}

What is the error?

BeHappy
– BeHappy

2020-05-14 06:22:36 +00:00
Commented May 14, 2020 at 6:22 — BeHappy
– BeHappy, Commented May 14, 2020 at 6:22

John Velasquez · Accepted Answer · 2020-05-14 06:34:37Z

1

You have to call json() to get the json form of your data

async componentDidMount() {
        const url = "https://covidtracking.com/api/v1/states/current.json";
        const data = await fetch(url).then((res) => res.json());

        const modifiedData = data.map((stateData) => ({
            state: stateData.state,
            pos: stateData.positive,
        }))

        this.setState({ data: modifiedData, loading: false });
}

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

answered May 14, 2020 at 6:34

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

deerawan · Accepted Answer · 2020-05-14 06:52:20Z

0

If you want to avoid promise and use pure async/await this can be alternative

async componentDidMount() {
  const url = "https://covidtracking.com/api/v1/states/current.json";

  const response = await fetch(url);
  const data = await response.json(); // call json() with await

  const modifiedData = data.map((stateData) => ({
    state: stateData.state,
    pos: stateData.positive,
  }));

  this.setState({ data: modifiedData, loading: false });
}

answered May 14, 2020 at 6:52

deerawan

8,5035 gold badges46 silver badges51 bronze badges

Collectives™ on Stack Overflow

Having trouble with Async/Await Fetching from an API in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related