React .map returns undefined with Fetch API

Question

I want my React render method to return objects from an API in a similar way to what I get from Postman. For example:

{
  "meta": {
    "count": 807,
    "countReturned": 10,
    "requestTime": 1552524395,
    "responseTime": 1552524395,
    "responseMs": 7
  },
  "data": [
     {
        "type": "breeds",
        "id": "1",
        "attributes": {
            "name": "Abyssinian"
        },
        "relationships": {
            "species": {
                "data": [
                    {
                        "type": "species",
                        "id": "3"
                    }
                ]
            }
        },
        "meta": []
    },

But I'm having trouble using .map to produce the object(s) I want. Here is my code:

class Results extends Component {
constructor() {
    super();
    this.state = {
        animals: [],
    };
}

componentDidMount() {
    var url = "https://test1-api.rescuegroups.org/v5/public/animals/breeds?fields[breeds]=name&fields[species]=singular,plural,youngSingular,youngPlural&include=species&options=meta&limit=10";
    const API_KEY = process.env.REACT_APP_API_KEY;

    fetch(url, {
        method: 'GET',
        headers: {
            Authorization: API_KEY,
            'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .then(data => this.setState({animals: data.results }))
}

render() {
    return (

        <div>
            {this.state.animals.map(animal => <div>{animal.results}</div>)}
        </div>

    )
}
}

export default Results;

Any tips are appreciated!

then(data => this.setState({animals: data.results })), according to your json, there is no results field in it. — Spark.Bao
– Spark.Bao, Commented Mar 14, 2019 at 1:42
I know! I should have clarified that better I have tried data.type as well as a level deeper data.type.breeds which both throw errors. I should have not used results in my question. — Cosmos
– Cosmos, Commented Mar 14, 2019 at 1:53

tam.dangc · Accepted Answer · 2019-03-14 02:32:17Z

1

The parameter of the callback method named 'data' doesn't mean it's a data property of the response data.

I think the callback should be

...
.then(response => response.json())
.then(response => this.setState({animals: response.data}))

<div>
  {this.state.animals.map(animal => <div>{animal.type}</div>)}
</div>

edited Mar 14, 2019 at 2:32

answered Mar 14, 2019 at 2:21

tam.dangc

2,0621 gold badge20 silver badges36 bronze badges

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

1 Comment

Cosmos Over a year ago

Yup I didn't understand 'data' was something I was defining myself. I need to figure out how to get keys working (combining your answer with Parth Patel's) but at least I'm seeing data rendered that I can work with. Thanks!

Parth Patel · Accepted Answer · 2019-03-14 01:51:04Z

1

If you are sure that the JSON data you are getting is correct, then you can loop over the object using the following code.

 Object.keys(this.state.animals).map((key) => {
    return <div value={key}>{ this.state.animals[key] }</div>
});

answered Mar 14, 2019 at 1:51

Parth Patel

3,9972 gold badges30 silver badges45 bronze badges

Comments

Gregory Friedman · Accepted Answer · 2019-03-14 02:27:51Z

I think this is confusing you because of a slightly confusing naming convention you have. Your componentDidMount function will need to look as follows:

componentDidMount() {
    var url = "https://test1-api.rescuegroups.org/v5/public/animals/breeds?fields[breeds]=name&fields[species]=singular,plural,youngSingular,youngPlural&include=species&options=meta&limit=10";
    const API_KEY = process.env.REACT_APP_API_KEY;

    fetch(url, {
        method: 'GET',
        headers: {
            Authorization: API_KEY,
            'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .then(json => this.setState({animals: json.data }))
}

You need to pull the data key out of the response, which, with your current naming, would be data.data.

In your render function, you will then use the animals from your state. If you wanted the name of the animal, you would use the following:

render() {
    console.log(this.state);
    return (

        <div>
            {this.state.animals.map(animal => <div>{animal.attributes.name}</div>)}
        </div>

    )
}

Collectives™ on Stack Overflow

React .map returns undefined with Fetch API

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related