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
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.