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) =>
use ? make in this code:
{relatedPosts?.map((post) =>
Check relatedPosts has data before rendering map. If not working please share getSimilarPosts, getRecentPosts
{
relatedPosts &&
relatedPosts.length > 0 &&
relatedPosts.map((post) => (
...
))
}