Reddit Client Project: (React & Redux) -- TypeError: Cannot destructure property 'title' of 'props.post' as it is undefined

Good day guys,
Please, I need help on this project.

I am trying to render each individual post item but it keeps giving me this error message:

I have two different files for the posts section (Posts.js and PostItem.js).

  1. Posts.js contains a function for each post I want to render of which I have mapped through.

  2. PostItem.js contains the code I want render unto the site by destructuring the array in Posts.js.

**Posts.js**

import React from 'react'
import PostItem from '../PostItem/PostItem'
import './Posts.css'


const Posts = () => {
    const posts = [
        {
            upvotes: 342,
            title: 'Actor Michael Williams dies at his apartment in NYC',
            image: '',
            user: 'Kennedy Jones',
            subreddit: 'News',
            comment_count: 9409
        }
    ]

    return (
        <div className="posts">
            {posts.map(post => (
                <PostItem post={post} />
            ))}
        </div>
    )
}

export default Posts

**PostItem.js**

import React from 'react'
import { BiUpvote, BiDownvote } from 'react-icons/bi'

const PostItem = (props) => {
    const { title, upvotes, image, user,subreddit, comment_count }  = props.post

    return (
        <div className="post">
            <div className="post-left">
                <BiUpvote /> 
                    <span> {upvotes} </span>
                <BiDownvote />
            </div>
            <div className="post-center"></div>
            <div className="post-bottom"></div>
        </div>
    )
}

export default PostItem

When you destructure properties in nested objects you have to use a different syntax. props.post is a nested object. Or you could first destructure post from props. Then destructure the other properties from post. But for one-line destructuring check out the syntax here How to destructure deeply nested objects in JavaScript ES6?