Cannot read property 'map' of undefined in react/redux

Question

before adding the map function i was getting the state

after adding map function i get.

I am not able to pinpoint the location of the problem.saw many posts on stackoverflow but none solved my probem

import React,{Fragment,useEffect} from 'react'
import PropTypes from 'prop-types'
import PostItem from './PostItem'
import {connect} from 'react-redux'
import {getPosts} from '../../actions/post'
import Spinner from '../layout/spinner'


const Posts = ({ getPosts, post: { posts, loading } })=>{
useEffect(()=>{
    getPosts();
},[getPosts])

return loading ?<Spinner/>:(
    <Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
          <i className="fas fa-user"></i>Welcome to the community
      </p>
      {/* PostForm*/}
      <div className="posts">
           {
               posts.map((post)=>{
                   return <PostItem key={post._id} post={post} />
               })
           }
      </div>

    </Fragment>
)
}


Posts.propTypes={
 getPosts:PropTypes.func.isRequired,
 post:PropTypes.object.isRequired,
}

const mapStateToProps=state=>({
  post:state.post
})

export default connect(mapStateToProps,{getPosts})(Posts)

first console your posts to check that you r getting values or not — akhtarvahid
– akhtarvahid, Commented Dec 6, 2019 at 5:45

Michael · Accepted Answer · 2019-12-06 05:56:18Z

2

You must check posts first before calling map function to prevent calling it before the data being passed to the props. Like this posts && posts.map(() => {})

import React, { Fragment, useEffect } from "react";
import PropTypes from "prop-types";
import PostItem from "./PostItem";
import { connect } from "react-redux";
import { getPosts } from "../../actions/post";
import Spinner from "../layout/spinner";

const Posts = ({ getPosts, post: { posts, loading } }) => {
  useEffect(
    () => {
      getPosts();
    },
    [getPosts]
  );

  return loading ? (
    <Spinner />
  ) : (
    <Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
        <i className="fas fa-user" />Welcome to the community
      </p>
      {/* PostForm*/}
      <div className="posts">
        {posts &&
          posts.map(post => {
            return <PostItem key={post._id} post={post} />;
          })}
      </div>
    </Fragment>
  );
};

Posts.propTypes = {
  getPosts: PropTypes.func.isRequired,
  post: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  post: state.post
});

edited Dec 6, 2019 at 5:56

answered Dec 6, 2019 at 5:42

Michael

3352 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Swagath Shetty Over a year ago

Its working for me but I am not conviced.I am following a tutorial in udemy and my instructor is not using posts && .how is that working for him ????

Michael Over a year ago

@SwagathShetty maybe he did is the posts props is not empty before calling the <Posts> component so you don't need to check it anymore inside the component. For example you ParentComponent.js where you use the <Posts /> component, { post && post.length && <Posts post={post} /> }

akhtarvahid · Accepted Answer · 2019-12-06 05:50:50Z

1

You need to use condition to check values before mapping to avoid errors.

1- {posts?posts.map():null}

2- {posts && posts.map()}

 <Fragment>
          <h1 className="large text-primary">Posts</h1>
          <p className="lead">
              <i className="fas fa-user"></i>Welcome to the community
          </p>
          {/* PostForm*/}
          <div className="posts">
               {
                   posts?posts.map((post)=>{
                       return <PostItem key={post._id} post={post} />
                   }):null
               }
          </div>

        </Fragment>

or

<Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
          <i className="fas fa-user"></i>Welcome to the community
      </p>
      {/* PostForm*/}
      <div className="posts">
           {
               posts && posts.map((post)=>{
                   return <PostItem key={post._id} post={post} />
               })
           }
      </div>

    </Fragment>

edited Dec 6, 2019 at 5:50

answered Dec 6, 2019 at 5:48

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

3 Comments

Dev Over a year ago

It's posts?.map by the way. I don't think posts?posts.map is valid

akhtarvahid Over a year ago

@iamdevlinph it's ternary condition

Dev Over a year ago

Ah my bad. Didn't notice the : null at the bottom. I thought you were doing an optional chaining

Pushprajsinh Chudasama · Accepted Answer · 2019-12-06 05:52:13Z

You can do something like the below code.

import React,{Fragment,useEffect} from 'react'
import PropTypes from 'prop-types'
import PostItem from './PostItem'
import {connect} from 'react-redux'
import {getPosts} from '../../actions/post'
import Spinner from '../layout/spinner'


const Posts = ({ getPosts, post: { posts, loading } })=>{
useEffect(()=>{
    getPosts();
},[getPosts])

return loading ?<Spinner/>:(
    <Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
          <i className="fas fa-user"></i>Welcome to the community
      </p>
      {/* PostForm*/}
      {posts.length ? 
      <div className="posts">
           {
               posts.map((post)=>{
                   return <PostItem key={post._id} post={post} />
               })
           }
      </div> : }

    </Fragment>
)
}


Posts.propTypes={
 getPosts:PropTypes.func.isRequired,
 post:PropTypes.object.isRequired,
}

const mapStateToProps=state=>({
  post:state.post
})

export default connect(mapStateToProps,{getPosts})(Posts)

Ankesh Ramani · Accepted Answer · 2019-12-06 07:33:00Z

const Posts = ({ getPosts, post: { posts, loading } })=>{
useEffect(()=>{
    getPosts();
},[getPosts])

return loading ?<Spinner/>:(
    <Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
          <i className="fas fa-user"></i>Welcome to the community
      </p>
      {/* PostForm*/}
      {posts.length ? 
      <div className="posts">
           {
               (posts || []).map((post)=>{
                   return <PostItem key={post._id} post={post} />
               })
           }
      </div> : }

    </Fragment>
)
}


Posts.propTypes={
 getPosts:PropTypes.func.isRequired,
 post:PropTypes.object.isRequired,
}

const mapStateToProps=state=>({
  post:state.post || [],
})

export default connect(mapStateToProps,{getPosts})(Posts)

Collectives™ on Stack Overflow

Cannot read property 'map' of undefined in react/redux

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related