Cannot read properties of undefined (reading 'map') react JS

Question

I am trying to make a blog using ReactJS and NextJS in VS Code I don't have any error but when I run it it shows in browser: " TypeError: Cannot read properties of undefined (reading 'map') "

So this is the code

import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import moment from 'moment';
import Link from 'next/link';

import { getSimilarPosts, getRecentPosts } from '../services';

const PostWidget = ({ categories, slug }) => {
  const [relatedPosts, setRelatedPosts] = useState([]);

  useEffect(() => {
    if (slug) {
      getSimilarPosts(categories, slug).then((result) => {
        setRelatedPosts(result);
      });
    } else {
      getRecentPosts().then((result) => {
        setRelatedPosts(result);
      });
    }
  }, [slug])

  console.log(relatedPosts)

  return (
    <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
      <h3 className="text-xl mb-8 font-semibold border-b pb-4">{slug ? 'Related Posts' : 'Recent Posts'}</h3>
      {relatedPosts.map((post) => (
        <div key={post.title} className="flex items-center w-full mb-4">
          <div className="w-16 flex-none">
            <img
              alt={post.title}
              height="60px"
              width="60px"
              unoptimized
              className="align-middle rounded-full"
              src={post.featuredImage.url}
            />
          </div>
          <div className="flex-grow ml-4">
            <p className="text-gray-500 font-xs">{moment(post.createdAt).format('MMM DD, YYYY')}</p>
            <Link href={`/post/${post.slug}`} className="text-md" key={index}>{post.title}</Link>
          </div>
        </div>
      ))}
    </div>
  );
};

export default PostWidget;

And this is where the error is.

{relatedPosts.map((post) =>

getSimilarPosts or getRecentPosts probably return undefined, hence you need to check if relatedPosts is undefined prior to calling a method on it with relatedPosts?.map() (see Optional chaining on MDN) — Sven
– Sven, Commented Jun 26, 2022 at 4:16

Shane · Accepted Answer · 2022-06-26 05:01:22Z

1

use ? make in this code:

{relatedPosts?.map((post) =>

answered Jun 26, 2022 at 5:01

Shane

314 bronze badges

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

1 Comment

Saeed Zhiany Over a year ago

Please read How do I write a good answer?. While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others.

Shah Ali · Accepted Answer · 2022-06-26 04:26:05Z

0

Check relatedPosts has data before rendering map. If not working please share getSimilarPosts, getRecentPosts

{
   relatedPosts && 
   relatedPosts.length > 0 &&
   relatedPosts.map((post) => (
      ...
   ))
}

answered Jun 26, 2022 at 4:26

Shah Ali

363 bronze badges

Collectives™ on Stack Overflow

Cannot read properties of undefined (reading 'map') react JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related