I am pulling posts from WordPress blog site. But when I console log state posts and response in .then() I get Response as empty object [object object] and state as undefined.

Where am I going wrong?

I am also getting following error:

TypeError: Cannot read property 'map' of undefined

Code:

import React, {Component} from 'react';
import axios from 'axios';
import Post from './Post/Post';

class Blog extends Component {

    state = {
        posts: []
    }

    ponentDidMount(){
        axios.get(".1/sites/ishhaanpatel.wordpress/posts")
        .then( response => {
            this.setState({posts: response.posts});
            console.log("Here are the posts: "+ this.state.posts);
            console.log("Here is the response: "+ response);

        });
    }

    render(){
         const posts = this.state.posts.map( post => {
             return <Post title={post.title} key={post.ID} author={post.author.name}  />;
         });
        return (
            <div>
                {posts}
            </div>
        );
    }
}

export default Blog;

I am pulling posts from WordPress blog site. But when I console log state posts and response in .then() I get Response as empty object [object object] and state as undefined.

Where am I going wrong?

I am also getting following error:

TypeError: Cannot read property 'map' of undefined

Code:

import React, {Component} from 'react';
import axios from 'axios';
import Post from './Post/Post';

class Blog extends Component {

    state = {
        posts: []
    }

    ponentDidMount(){
        axios.get("https://public-api.wordpress./rest/v1.1/sites/ishhaanpatel.wordpress./posts")
        .then( response => {
            this.setState({posts: response.posts});
            console.log("Here are the posts: "+ this.state.posts);
            console.log("Here is the response: "+ response);

        });
    }

    render(){
         const posts = this.state.posts.map( post => {
             return <Post title={post.title} key={post.ID} author={post.author.name}  />;
         });
        return (
            <div>
                {posts}
            </div>
        );
    }
}

export default Blog;

• javascript
• reactjs
• get
• typeerror
• axios

• When you set state is posts an empty or undefined array? – Mike Tung Commented Jan 28, 2018 at 0:34
• just console.log the response... axios response return the data in the object data key. – Shibi Commented Jan 28, 2018 at 0:38
• when I only return response, console.log still giving me empty object but this time I got state value as empty object too. – Ishan Patel Commented Jan 28, 2018 at 0:44

2 Answers 2

You are having problem with asyncronous.

setState is async. So, you won't immediately get the value in this.state.posts.

To solve this problem you can use callbacks as follows:

this.setState({ posts: response.posts }, () => {
    console.log(this.state.posts);
});

Also your posts is nested inside response.data. So, your setState should look something like:

this.setState({ posts: response.data.posts }, () => {
    console.log(this.state.posts);
});

Your data is nested inside the response.data object.

Update

this.setState({posts: response.posts});

to

this.setState({posts: response.data.posts});

Axios returns a HTTP response object which contains additional information about the response.