Type '{ post: IPost; }' is not assignable to type 'IntrinsicAttributes & IPost'.-CodePudding

I am working on a project to improve my skills in TS. Getting data from a server, everything is working fine. Posts started to be displayed without errors, However, when I decided to load the posts in individual Post.tsx components by mapping through the data ts immediately gave me an error:

    Type '{ post: IPost; }' is not assignable to type 'IntrinsicAttributes & IPost'.
  Property 'post' does not exist on type 'IntrinsicAttributes & IPost'

The app is simple, there's the array of Posts which I fetch from the DB. I then map through the array and return the components with the individual posts.

Here are the types I'm using:

interface IPosts {
  posts: IPost[]
};

interface IPost {
  _id: string
  title: string
}

Here is the code in Posts.tsx:

export default function Home({ posts }: IPosts) {    
  return (
      <div>
        {posts.map(post => {
          console.log(post);
          return (
            <Post key={post._id} post={post} />
          )
        })}
      </div>
  )
}

and here is the code for Post.tsx:

const Post = ( post : IPost) => { 
    console.log(post);
    return (
        <div>{post.title}</div>
    )
}

For some reason when I run this I get the error above on the post={post} prop I pass down to the Post component.

It also seems to convert a single post object like this:

{
 _id: "12345"
 title: "this is a title"
}

to this:

 {post: 
        {
         _id: "12345"
         title: "this is a title"
        }
    }

Although this is not ideal, I can destructure the post object in the Post component however it does not fix that error that keeps coming up :/

Can someone help me with this?

CodePudding user response：

list declare by type[]

interface IPosts {
  posts: IPost[]
};

edit this also

 const Post = ( {post} : {post: IPost}) => {