Blog using React, GraphQL, GraphCMS, NextJS, Tailwind CSS - reactjs

Question

I am creating my components => PostCard.JSX and pulling the data from graphCMS. Everything was going good and created more files under the components folder. I took a break and I exited. But when I came back to code again, I run the app using npm run dev, it gives me this error:
error - components/PostCard.jsx (35:27) # PostCard
TypeError: Cannot read property 'name' of null
33 |
34 | <img
35 | alt={post.author.name}
I do not know why this error happened now, however, the app was working before. here is my code for the PostCard.jsx
import React from 'react';
//import Image from 'next/image';
import moment from 'moment';
import Link from 'next/link';
const PostCard = ({ post }) => {
/* console.log(post); */
{/* <div>
{post.title}
{post.author.name}
{post.excerpt}
{post.featuredImage.url}
</div> */}
return (
<div className="bg-white shadow-lg rounded-lg p-0 lg:p-8 pb-12 mb-8">
<div className="relative overflow-hidden shadow-md pb-80 mb-6">
<img
src={post.featuredImage.url}
alt={post.title}
className="object-top absolute h-80 w-full object-cover shadow-lg rounded-t-lg lg:rounded-lg"
/>
</div>
<h1 className="transition duration-700 text-center mb-8 cursor-pointer hover:text-pink-600 text-3xl font-semibold">
<Link href={`/post/${post.slug}`}>{post.title}</Link>
</h1>
<div className="block lg:flex text-center items-center justify-center mb-8 w-full">
<div className="flex items-center justify-center mb-4 lg:mb-0 w-full lg:w-auto mr-8 items-center">
<img
alt={post.author.name}
height="30px"
width="30px"
className="align-middle rounded-full"
src={post.author.photo.url}
/>
<p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{post.author.name}</p>
</div>
<div className="font-medium text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span className="align-middle">
{moment(post.createdAt).format('MMM DD, YYYY')}
</span>
</div>
</div>
<p className="text-center text-lg text-gray-700 font-normal px-4 lg:px-20 mb-8">
{post.excerpt}
</p>
<div className="text-center">
<Link href={`/post/${post.slug}`}>
<span className="transition duration-500 ease transform hover:-translate-y-1 inline-block bg-pink-600 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">
Continue Reading
</span>
</Link>
</div>
</div>
)
};
export default PostCard;
Can someone help, please? I tried to solve it but I couldn't.
Thank you

Answer 1

try passing the initial props like this
<div className="lg:col-span-8 col-span-1">
{
posts.map((post, index) => (
<PostCard post={post.node} key={post.title} />
))
}
</div>

Answer 2

Take a look on the guy that is calling PostCard because it's passing post.author as null.
A good approach to avoid this kind of error to be shown to users is to use lodash get(post, 'author.name', ''), but this will not solve your problem, only avoid user to see it. Your problem is in the guy that's calling PostCard.