I encountered an error message stating: Objects are not valid as a React child (found: object with keys {image, name}). If you intended to render a collection of children, use an array instead.
I am unsure about what I am missing.
The code below is functioning properly:
interface Props {
posts: [Post]
}
const Home: NextPage<Props> = ({ posts }) => {
return (
<div className="mx-auto max-w-7xl">
<Head>
<title>Medium Blog</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<div className="flex items-center justify-between border-y border-black bg-yellow-400 py-10 lg:py-0">
<div className="space-y-5 px-10">
<h1 className="max-w-xl font-serif text-6xl">
<span className="underline decoration-black decoration-4">
Medium
</span>{' '}
is a place to write, read, and connect
</h1>
<h2>
It's easy and free to post your thinking on any topic and connect with millions of readers
</h2>
</div>
<img
className="hidden h-32 md:inline-flex lg:h-full"
src="http://accountabilitylab.org/wp-content/uploads/2020/03/Medium-logo.png"
alt=""
/>
</div>
{/* Posts */}
{posts.map((post) => (
<Link key={post._id} href={`/post/${post.slug.current}`}>
<div>
<img src={urlFor(post.mainImage).url()!} alt="" />
<div>
<div>
<p>Test 1</p>
<p>Test 2 by Test 3</p>
</div>
</div>
</div>
</Link>
))}
</div>
)
}
When I change the part with "Test 1", "Test 2", "Test 3" to the following code, it no longer works and throws an error:
{/* Posts */}
{posts.map((post) => (
<Link key={post._id} href={`/post/${post.slug.current}`}>
<div>
<img src={urlFor(post.mainImage).url()!} alt="" />
<div>
<div>
<p>{post._title}</p>
<p>{post.description} by {post.author}</p>
</div>
</div>
</div>
</Link>
))}
The interface I export from typings.ts is as follows:
export interface Post {
_id: string
_createdAt: string
_title: string
author: {
name: string
image: string
}
description: string
mainImage: {
asset: {
url: string
}
}
slug: {
current: string
}
body: [object]
}
I have done a lot of research on this issue.