CODEWITHSUNDEEP
javascriptreactjslaravelaxios
Anadi Misra
Anadi Misra

Reputation: 2103

ReactJS set state does not assign array from Axios response data

I've defined an empty array in the react component constructor which I wish to assign with json response data from an API call

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

    this.state = {
      blogs : []
    };
  }

I call the componentDidMount method to load data on this component where I'm using setState to assign values

componentDidMount(){
  Axios.get("/api/blogs").then(response => {
    const blogData = response.data;
    this.setState({blogs: blogData.data});
  });
}

The JSON response data is as follows (Laravel collection resource with meta and links)

{
  "data": [
    {
      "title": "Experiments in DataOps",
      "status": true,
      "publish_date": "2020-01-29",
      "slug": "experiments-in-dataops"
    },
    {
      "title": "What is it about certifications anyway?",
      "status": true,
      "publish_date": "2020-01-29",
      "slug": "what-is-it-about-certifications-anyway"
    }
  ],
  "links": {
    "self": "link-value",
    "first": "http://adminpanel.test/api/blogs?page=1",
    "last": "http://adminpanel.test/api/blogs?page=1",
    "prev": null,
    "next": null
  },
  "meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 1,
    "path": "http://adminpanel.test/api/blogs",
    "per_page": 15,
    "to": 2,
    "total": 2
  }
}

the blogs array however remains undefined when I'm calling it later in populating the grid data

<BootstrapTable data={this.blogs} version="4" striped hover pagination search options={this.options}>

I get an empty table, calling console.log on blogs and this.blogs reveals it's undefined.

I'm using reactstrap and react-bootstrap-table for this grid component.

Upvotes: 0

Views: 330

Answers (1)

Balaj Khan
Balaj Khan

Reputation: 2570

You are not accessing the state correctly to access the blogs use this.state.blogs:

<BootstrapTable data={this.state.blogs} version="4" striped hover pagination search options={this.options}>

Upvotes: 3

Related Questions