Type '{ author: Author; }' is not assignable to type 'IntrinsicAttributes & Author'

Question

I am totally new to TS and react and I ran into a problem. I tried searching many places and can't seem to fix it. The whole error message is: Type '{ author: Author; }' is not assignable to type 'IntrinsicAttributes & Author'. Property 'author' does not exist on type 'IntrinsicAttributes & Author'.ts(2322) and my code is

import React from "react"

interface Data{
  author: Author;
  date:string;
  text:string;

}

interface Author{
  avatarUrl: string;
  name: string;

}
const Comment :React.FC<Data> =({author,text,date})=>{

  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar author={author} />
       <div className="UserInfo-name">
          {author.name}
    </div>

  </div>
  <div className="Comment-text">
    {text}
  </div>
  <div className="Comment-date">
    {date}
  </div>
</div>


)
}


  
const Avatar:React.FC<Author> = ({
  avatarUrl,
  name
} ) =>{
  return(
      <img className="Avatar"
        src={avatarUrl}
        alt={name}
      />
  
  )
}
const App = () =>{
  const data = {
    date:"2017:11:07",
    text:"Some text is here",
    author:{
      avatarUrl:"https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&w=1000&q=80",
      name:"teleph0nes"
    }

  }
  return(
    <>
    <Comment author={data.author}
    text = {data.text}
    date={data.date}
    

/>
</>
  )
}

export default App

Answer 1

You declare Avatar as this:

const Avatar:React.FC<Author> = ({

And the Author type as this:

interface Author{
  avatarUrl: string;
  name: string;
}

Which means that Avatar will expect two props avatarUrl and name. But you are passing it a prop named author.

If you want Avatar to receive an author prop, then you have to declare that in the type with something like:

const Avatar:React.FC<{ author: Author }> = ({ author }) => {

Which does what you expect.

See playground