React Error: Cannot read property 'map' of undefined

Question

I have been trying to resolve this error for almost 2 hours but no luck. I have even researched and used the bind method but still no luck with mapping a props that was passed through a parent component. Your help will be greatly appreciated.

import React from "react";
import { Link } from "react-router-dom";

const PostList = ({ postItem }) => {
    postItem.map((post) => (
        <div className="mx-auto mb-3 card w-75" key={post.id}>
            <div className="card-body">
                <h5 className="card-title">{post.title}</h5>
                <p className="card-text">{post.comment}</p>
                <Link to="/create">
                    <ion-icon
                        style={{ color: "#fc5185", fontSize: "20px" }}
                        name="trash-outline"
                    ></ion-icon>
                </Link>
            </div>
        </div>
    ));
};

export default PostList;

And the parent component is

class Dashboard extends Component {
    state = {
        posts: [
            {
                id: 1,
                title: "Hello",
                comment: "it is sunny today",
            },
        ],
    };

    createPost = (title, comment) => {
        const newPost = {
            id: Math.floor(Math.random() * 1000),
            title,
            comment,
        };
        this.setState({
            posts: [...this.state.posts, newPost],
        });
    };
    render() {
        return (
            <div>
                <CreatePost createPost={this.createPost} />
                <PostList postItem={this.state.posts} />
            </div>
        );
    }
}

export default Dashboard;

Who uses PostList? That component is receiving an undefined parameter, thats the error, so which component is importing PostList? — pmiranda, Jun 21 '20 at 03:32
@pmiranda thank you for the quick response, i have updated the code to show Dashboard , the component importing to PostList — Mim, Jun 21 '20 at 03:42
@ManirajMurugan thanks for the quick help, i have tried but it did not work — Mim, Jun 21 '20 at 03:43
initialize postItem with default value, `const PostList = ({ postItem = []}) => {}` — Nagesh Sanika, Jun 21 '20 at 03:44
`PostList` doesn't return the mapped value, so it will never render anything. This doesn't look like your main problem, but is something you will want to fix. — yeerk, Jun 21 '20 at 03:52
You might want to try opening devtools (in Chrome) and enabling break on caught exceptions (https://stackoverflow.com/a/17324511/1117119). React can obfuscate the error stack slightly, and so the error may be coming from a line you didn't expect. — yeerk, Jun 21 '20 at 03:55
@yeerk, yes it is exactly my main problem...please how do i edit the code so that PostList will return the mapped value. I passed the props from Dashboard component. — Mim, Jun 21 '20 at 03:57

score 0 · Accepted Answer · answered Jun 21 '20 at 04:10

I guess you have missed to add return to the PostList component, you can do it in three ways (read about arrow functions)

const PostList = ({ postItem }) => postItem.map((post) => (
    <div className="mx-auto mb-3 card w-75" key={post.id}>
        <div className="card-body">
            <h5 className="card-title">{post.title}</h5>
            <p className="card-text">{post.comment}</p>
        </div>
    </div>
));

const PostList = ({ postItem }) => (
    postItem.map((post) => (
        <div className="mx-auto mb-3 card w-75" key={post.id}>
            <div className="card-body">
                <h5 className="card-title">{post.title}</h5>
                <p className="card-text">{post.comment}</p>
            </div>
        </div>
    ));
);

const PostList = ({ postItem }) => {
    return postItem.map((post) => (
        <div className="mx-auto mb-3 card w-75" key={post.id}>
            <div className="card-body">
                <h5 className="card-title">{post.title}</h5>
                <p className="card-text">{post.comment}</p>
            </div>
        </div>
    ));
}

Here is the working example

React Error: Cannot read property 'map' of undefined

1 Answers1