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) =>

Answer 1

use ? make in this code:

{relatedPosts?.map((post) =>

Answer 2

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

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