ReactJS - map doesn't work for single item-CodePudding

I have a really trivial problem with map function. I am making a request to my API, which returns the single object. I then want to display the object in render method.

const api = axios.create({
    baseURL: `https://localhost:5001/api/v1/`
})

class SinglePost extends Component {
    state = {
        post: []
    }
    constructor(props) {
        super(props);
        api.get(`posts/9a6b5be6-b3ef-4c2d-a36b-08da14c62914`).then(res => {
            console.log(res.data)
            this.setState({ posts: res.data })
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.post.map(x => <h2>{x.title}</h2>)
                }
            </div>
        )
    }
}

export default SinglePost;

The console.log() of res.data seems to display the data just fine.

{
    "id": "9a6b5be6-b3ef-4c2d-a36b-08da14c62914",
    "name": null,
    "title": "Teeest",
    "urlTitle": null,
    "content": "123",
    "created": "2022-04-02T18:30:55.1536762",
    "description": "123",
    "score": 0,
    "isDeleted": false,
    "currentFlagStatus": 0,
    "flagReason": null,
    "userId": "9ecac069-8cfc-4cac-8056-87093fb9c57c",
    "authorName": null,
    "authorProfilePic": null,
    "hashtags": [
        {
            "id": "a8bc782c-7f5e-4dfc-220c-08da1355d3ec",
            "hashtagName": "byq",
            "hashtagNameInLower": "byq",
            "amountOfHashtagFollowers": 0
        },
        {
            "id": "a5efd6b1-cff0-40b5-2218-08da1355d3ec",
            "hashtagName": "Test",
            "hashtagNameInLower": "test",
            "amountOfHashtagFollowers": 0
        }
    ],
    "comments": []
}

However my map function doesn't seem to put the data inside the <h2> tag. Setting the breakpoint exactly at this.state.post.map(x => <h2>{x.title}</h2>) showed that it's not even being hit, however there are no errors on the console. How can I properly map this?

EDIT:

Just like Alon Barenboim and Nicholas Tower pointed out, there was a typo (setting state to posts instead of post). However, the issue now is that that piece of code now throws the error that this.state.post.map is not a function.

CodePudding user response：

I guess that the issue is that you call this.setState({ posts: res.data }) for posts, but trying to map post: this.state.post.map(x => <h2>{x.title}</h2>

EDIT:

If I understand correctly, you just need to display the data that is stored inside the posts object in a component. In order to do so, you can just do the following:

const api = axios.create({
    baseURL: `https://localhost:5001/api/v1/`
})

class SinglePost extends Component {
    state = {
        posts: []
    }
    constructor(props) {
        super(props);
        api.get(`posts/9a6b5be6-b3ef-4c2d-a36b-08da14c62914`).then(res => {
            console.log(res.data)
            this.setState({ posts: res.data })
        })
    }

    render() {
        return (
            <div>
                {this.state.posts ? <h2>this.state.posts.title</h2> : null}
            </div>
        )
    }
}

export default SinglePost;

You can obtain each value that is stored inside the state object just by writing {this.state.posts.ATTRIBUTE}