import Post from "./Post"

const PostList = ({posts}) => {


const postComponents = posts.map(post => {
    return (
        <Post
        id = {post.id}
        hub_id={post.hub_id}
        post_body={post.post_body}

         />
    )})


return(
    <div className="postList">
    {postComponents}
    <p>hello world: postList</p>
    </div>
)
}
export default PostList;

CodePudding user response：

Try using (props) instead of ({posts}) and then use props.posts.map. In your code your posts are null means your component is not getting any posts from props. Sometimes I don't know if it happens with everyone my props are not destructed correctly so I use the simple approach.

CodePudding user response：

const postComponents = posts.map(post => {
    return (
        <Post
        id = {post.id}
        hub_id={post.hub_id}
        post_body={post.post_body}

         />
    )})

I would change this postComponents to this.

const postComponent = ({posts}) => {
    
 return (
   <div>
       {posts.map((post) => (
            <Post
            key={post.id} // need a key when mapping
            id = {post.id}
            hub_id={post.hub_id}
            post_body={post.post_body}
         />
       ))}
   </div>
 )
}

when mapping any array you need to have it wrapped by another element and provide a key to each mapped element. This is how I would write the postComponent if it is being passed the properties posts. The error you are getting is probably because you are not passign posts to your postlist component. posts = null //nothing is in posts. Also I would break this postComponents into another file.