REST calls from a react component

Question

I'm trying to replicate same code here with different JSON, but the data is not loading.

Please help, I'm not sure what is missing in the code.

 import React from 'react'; export default class ItemLister extends React.Component { constructor() { super(); this.state = { items: [] }; } componentDidMount() { fetch('http://media.astropublications.com.my/api/drebar_landing.json') .then(result=>result.json()) .then(items=>this.setState({items})); } render() { return( <ul> {this.state.items.length ? this.state.items.map(item=><li key={item.id}>{item.Title}</li>) : <li>Loading...</li> } </ul> ) } } 

Answer 1

Your api response contains an object ArticleObject and the ArticleObject has array of objects so you need to set the items.ArticleObject to the state.

Take a look at below solution for better understanding

componentDidMount() {
  fetch('http://media.astropublications.com.my/api/drebar_landing.json')
      .then(result=>result.json())
      .then(items=>this.setState({items:items.ArticleObject}));
    }