Reputation: 4192
I created this using typescript:
import React, {FC} from 'react';
interface Interface {
name:string,
age:number
}
const Home: React.FC<Interface> = (info) => {
return (
<div>
<h1>{info.name}</h1>
</div>
);
};
export default Home;
///
const info = {name:'Boris', age:45}
function App() {
return (
<div className="App">
<Home info={info}/>
</div>
);
}
...but i get an error from typescript:
Type '{ info: { name: string; age: number; }; }' is not assignable to type 'IntrinsicAttributes & Interface & { children?: ReactNode; }'. Property 'info' does not exist on type 'IntrinsicAttributes & Interface & { children?: ReactNode; }'
Question: How to avoid this and why it appeared?
Upvotes: 1
Views: 380
Reputation: 187034
This code here:
interface Interface {
name:string,
age:number
}
const Home: React.FC<Interface> = //...
Says that the component Home
expects 2 props: name
and age
.
This code here:
<Home info={info}/>
Passes in one prop named info
.
So you either want to pass in name
and age
as props:
<Home name={info.name} age={info.age}/>
Or you want to declare the info
prop:
interface Props {
info: {
name:string,
age:number,
}
}
const Home: React.FC<Props> = ({ info }) => { /* ... */ }
// Pass props like:
<Home info={info}/>
(Note the ({ info })
destructuring assignment, which assigns the info
prop the to local variable info
.)
Upvotes: 2
Reputation: 2406
You should destruct your props in Home
component.
So it should be
const Home: React.FC<Interface> = ({ info }) => {
return (
<div>
<h1>{info.name}</h1>
</div>
);
};
Upvotes: 0