Asking
Asking

Reputation: 4192

Use typescript interfaces for passed props in ReactJs

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

Answers (2)

Alex Wayne
Alex Wayne

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

Playgorund

Upvotes: 2

Mario Nikolaus
Mario Nikolaus

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

Related Questions