How to display data from API endpoint using Axios and React

Question

I'm currently running through this tutorial - https://appdividend.com/2018/11/11/react-crud-example-mern-stack-tutorial/#React_CRUD_Example

I've substituted in my own API and i've successfully managed to create new records. I'm now trying to view a list of all the records but getting the following error

Here is the code (exact copy of tutorial code except API link)



    import React, { Component } from "react";
    import axios from "axios";
    import TableRow from "./TableRow";

    export default class Index extends Component {
      constructor(props) {
        super(props);
        this.state = { address: [] };
      }
      componentDidMount() {
        axios
          .get("http://localhost:6505/api/v1/Address")
          // .then(res => console.log(res))

          .then(response => {
            this.setState({ address: response.data });
          })
          .catch(function(error) {
            console.log(error);
          });
      }
      tabRow() {
        return this.state.address.map(function(object, i) {
          return ;
        });
      }

      render() {...}

If i add in the line that's commented out above '.then(res => console.log(res))', the error message no longer shows and the page renders but without any data - see screenshot below of page and console. I've highlighted the new error message and also highlighted where the data is that i want to display.

Any pointers are greatly appreciated :)

@nivendha Hi, the tabRow function is called after "render(){ return(", within a <tbody> — Gillian
– Gillian, Commented Apr 26, 2019 at 11:11
@lovepreetsingh thanks, this did cross my mind but didn't seem to make any difference. I'll leave it in the code though, as i have a feeling i may have more than one issue. — Gillian
– Gillian, Commented Apr 26, 2019 at 11:15
you are trying to map something that does not exist. Yo can set a initialState address=[] — ProblemsEverywhere
– ProblemsEverywhere, Commented Apr 26, 2019 at 11:18

Murtaza Hussain · Accepted Answer · 2019-04-26 11:31:16Z

1

Your data is in response.data.results so change it to this and it will work.

Thanks

answered Apr 26, 2019 at 11:31

Murtaza Hussain

4,3631 gold badge30 silver badges31 bronze badges

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

1 Comment

Gillian Over a year ago

This seemed to fix the issue. Thanks

Ashwanth Madhav · Accepted Answer · 2019-04-26 11:35:52Z

0

The .map function is only available on array.

It looks like data isn't in the format you are expecting.

can you try with consoling response.data or response.data.results.

Can you replace this.setState({ address: response.data }); with this.setState({ address: response.data.results });

edited Apr 26, 2019 at 11:35

answered Apr 26, 2019 at 11:22

Ashwanth Madhav

1,2341 gold badge12 silver badges23 bronze badges

3 Comments

Gillian Over a year ago

Thanks, i've just updated code to .then(res => console.log(res.data.results)) and results showed in the console as expected.

Ashwanth Madhav Over a year ago

Then can you replace this.setState({ address: response.data }); with this.setState({ address: response.data.results });

Gillian Over a year ago

Oh i just removed the .then(res => console.log(res.data.results)) line of code and saved the page, and the data is now showing! Thank you so much

Collectives™ on Stack Overflow

How to display data from API endpoint using Axios and React

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related