Iterating through a Wordpress Object REACT js - reactjs

Question

i am new to REACT.js and your advise would be much appreciated
i have a list of categories i have placed a post under
how do i display these list of categories in react js?
i tried the below:
<ul>
{post.categories.map((category) => {
return(
<li>{category.name}</li>
);
})};
</ul>
but i get the error:
TypeError: post.categories.map is not a function
BELOW ARE MY FILES
app/scr/components/Blog/Index.js
import React, { Component } from 'react';
import Layout from '../../components/Layout/Layout';
import { Link } from 'react-router-dom';
class Index extends Component {
render() {
return(
<Layout>
<ul>
{this.props.posts.map((post) => {
if (post) {
return(
<li key={post.ID} className="card">
<div>{post.title}</div>
<div>{post.date}</div>
<ul>
{post.categories.map((category) => {
return(
<li>{category.name}</li>
);
})};
</ul>
</li>
);
} else {
return null;
}
})}
</ul>
</Layout>
);
}
}
export default Index;
app/scr/containers/BlogBuilder/BlogIndexBuilder.js
import React, { Component } from 'react';
import BlogIndex from '../../components/Blog/Index';
import axios from 'axios';
class BlogIndexBuilder extends Component {
state = {
posts: []
};
componentDidMount() {
axios
.get(
"http://public-api.wordpress.com/rest/v1/sites/emma.wordpress.com/posts"
)
.then(res => {
this.setState({ posts: res.data.posts });
console.log(this.state.posts);
})
.catch(error => console.log(error));
}
parseOutScripts(content) {}
render() {
return (
<div>
<BlogIndex
posts={this.state.posts}
/>
</div>
);
}
}
export default BlogIndexBuilder;
app/scr/components/Layout/Layout.js
import React from 'react';
import Aux from '../../hoc/Aux';
const layout = (props) => {
return(
<Aux>
<main>{props.children}</main>
</Aux>
)
};
export default layout;

Answer 1

You can't map over an object. It needs to be an array. You can transform it to an array if you want by using Object.values(post.categories):
<ul>
{Object.values(post.categories).map((category) => {
return(
<li>{category.name}</li>
);
})};
</ul>