Type {postData:IPostData} is not assignable to type 'IntrinsicAttribute&IPostData'

Question

Problem

Hello, I am new to react and typescript. I am trying to pass a custom interface based variable to my component, but IDE keeps saying my variable is not assignable. I ran through several questions, but most of them were about not designating variable type, and I think my code is okay with that. So I'm totally lost here.

Codes

<Post.tsx>

interface IPostData{
  id: number,
  title: string,
  text: string
}

export type {IPostData}

export const PostBox = (postData: IPostData) => {
  const {id, title, text} = postData
  return (
    <div>
      <Box>{id}</Box>
      <Box>{title}</Box>
      <Box>{text}</Box>
    </div>
  )
}

<Board.tsx>

import {PostBox, IPostData} from 'Post'

export default function Board(){
  const testPostData : IPostData = {
    id: 1,
    title: "Testing Post Interface",
    text: "Testing text too"
  }

  return (
    <div>
      <PostBox
        postData = {testPostData}
      />
    </div>
  )
}

Error

Type {postData:IPostData} is not assignable to type 'IntrinsicAttributes & IPostData'.

Answer 1

You have to take props in your postBox component as like

interface IPostData{
  id: number,
  title: string,
  text: string
}

export type {IPostData}

export const PostBox:React.FC<IPostData> = ({id, title, text}) => {
  return (
    <div>
      <Box>{id}</Box>
      <Box>{title}</Box>
      <Box>{text}</Box>
    </div>
  )
}