Use typescript interfaces for passed props in ReactJs

Question

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?

Alex Wayne · Accepted Answer · 2020-10-05 19:47:13Z

2

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

answered Oct 5, 2020 at 19:47

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mario Nikolaus · Accepted Answer · 2020-10-05 18:56:44Z

0

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>
  );
};

answered Oct 5, 2020 at 18:56

Mario Nikolaus

2,4061 gold badge23 silver badges29 bronze badges

Collectives™ on Stack Overflow

Use typescript interfaces for passed props in ReactJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related