'Objects are not valid as a React child - with typescript

I am getting the following error: Objects are not valid as a React child (found: object with keys {image, name}). If you meant to render a collection of children, use an array instead.

I am not getting what am missing.

The following code works fine:

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 aplace 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>
  )
}

If I change the part where there is "Test 1" "Test 2" "Test 3" to the following code, it doesn't work anymore and I get the 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>
      ))}

My interface I export from typings.ts:

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 read a lot of things about this problem.

typescript next.js

Solution 1:^[1]

I had to insert {post.author.name} for some reason I forgot.

Thank you CRice

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Binho

'Objects are not valid as a React child - with typescript

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]