How to fix “cannot read property 'map' of undefine” in react native

Question

I'm passing a map to all my posts variable so that all my posts can appear as a single post, but it kept bringing up the error

I have tried solving it using the Reactjs Documentation from the react website, it shows almost the same code as mine.

import PropTypes from 'prop-types';
import PostItem from './PostItem';

class PostFeed extends Component {
  render() {
    const { posts }  = this.props;
    const list = posts.map((post) => <PostItem 
            key={post._id} 
            posts={post}
         />
        );
    return (
        {list}
    );
  }
}

PostFeed.propTypes = {
  posts: PropTypes.array.isRequired
};

export default PostFeed;

I expect every posts to appear as a single post from the postItem component

Answer 1

posts is probably result of an async action and its value is not available at the time that your function is doing its job. So it should have a default value or be checked before that has a value.do this:

if(this.props.posts && Array.isArray(this.props.posts) && this.props.posts.length > 0)
//then map

Answer 2

The error means, when your PostFeed mounts for first time at that time props are not available, so the error.

You can check if data available, like,

let list = "Loading...";
if(posts && posts.length > 0){
  list = posts.map((post) => <PostItem key={post._id} posts={post} /> );
}