Get data properly from an API with React

Question

I am using an API which contains cards. And to call this API, I am using Axios. So far so good, but I want to return the deck_id and for some reason it does not work. And I get the error "this.state.card.map is not a function"

Here is my current code:

import React from "react";
import axios from "axios";
const CARD_API = "https://deckofcardsapi.com/api/deck/new/shuffle/";

export default class PersonList extends React.Component {
  constructor(props) {
     super(props)
     this.state = {
       card: []
     }
  }

  async componentDidMount() {
     const card= await axios.get(CARD_API)
     this.setState({ card})
  }

  render() {
     return (
        <ul>
           {this.state.card.map(card=>
              <li>{card.deck_id}</li>
           )}
        </ul>
     )
  }
}

What format you are getting back the result from axios.get(MOVIE_API)? Most probably this means movie is not an array. — norbitrial
– norbitrial, Commented May 11, 2020 at 15:16

Vivek Doshi · Accepted Answer · 2020-05-11 15:23:55Z

3

In axios you will get data inside response.data , so this is how you will get access to data

try {

    const response = await axios.get(MOVIE_API); //<-- This will have a lot more thing apart from data you need
    const movie = response.data; //<---- SOLUTION
    this.setState({ movie })

} catch (err) {
    console.log(err)
}

Note : Always put your async await code within try catch block if possible

edited May 11, 2020 at 15:23

answered May 11, 2020 at 15:18

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

2 Comments

Alex Over a year ago

How do I call the deck_id to my return method?

Vivek Doshi Over a year ago

@Alex, your code is good, just setState properly first as shown above, and make it array and not object, as you are looping through it in render part

Collectives™ on Stack Overflow

Get data properly from an API with React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related