.map is not returning the values(not a function)

Question

I am trying to return the list of similar blogs which i have stored in the database to a component in nextjs.

But i am getting an Error related.map is not a function

I tried debugging using { JSON.stringify(related) } which is giving me the response of JSON object.

{"related":{"_id":"5eab0a0b2741da18f0d3624e","title":"lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum  ....","slug":"lorem-blog-3-one",
"postedBy":{"_id":"5e9d3833a73b2c0cec9f5e1c","name":"user1","profile":"http://localhost:3000/profile/RxAq9u5Ck"},"updatedAt":"2020-04-30T17:25:31.977Z"}}

The function i'm using

 const showRelatedBlogs = () => {
        return related.map((blog, i) => (
            <div className="col-md-4" key={i}>
                <article>
                    <RelatedCard blog={blog} />
                </article>
            </div> 

        ));
    };

Answer 1

The response you are getting from your server shows that you are not getting a list of blogs but instead 1 blog. You have 2 options

1. Make your server return an array of blogs. So your JSON response would be:

{
    "related": [
        {
            "_id": "5eab0a0b2741da18f0d3624e",
            "title": "lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum  ....",
            "slug": "lorem-blog-3-one",
            "postedBy": {
                "_id": "5e9d3833a73b2c0cec9f5e1c",
                "name": "user1",
                "profile": "http://localhost:3000/profile/RxAq9u5Ck"
            },
            "updatedAt": "2020-04-30T17:25:31.977Z"
        },
        {
            "_id": "5eab0a0b2741da18f0d3624e",
            "title": "lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum  ....",
            "slug": "lorem-blog-3-one",
            "postedBy": {
                "_id": "5e9d3833a73b2c0cec9f5e1c",
                "name": "user1",
                "profile": "http://localhost:3000/profile/RxAq9u5Ck"
            },
            "updatedAt": "2020-04-30T17:25:31.977Z"
        },
        //...
    ]
}

Then in your component you can then use the .map function like you were doing.

2. You only show one blog info. So rather than mapping you should just show 1. Your component will look like this:

// Lets say `related` is a prop
const showRelatedBlog = ({ related }) => {
    return (
        <div className="col-md-4">
            <article>
                <RelatedCard blog={related} />
            </article>
        </div> 

    );
};