Passing a function as a prop to a Typescript React Functional Component

Question

I have a functional component (written in Typescript) that needs to pass a handler function down to a child component. Here is a scaled down version of the parent function:

type Props = { handleLocationChange(): void };

const Sidebar: React.FC<Props> = (props) => { 
 const handleLocationChange = () => {
    console.log('Location Changed.');
  };
return (
   <>
      <Search handleLocationChange={handleLocationChange} /> 
   </>
)
}

In VS Code the search component shows an error:

Type '{ handleLocationChange: () => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'handleLocationChange' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)

Any help would be much appreciated. I am sure I am missing something small.

I think you can't invoke the function at definition. Try without invoke function: { handleLocationChange: void } — Joao Polo
– Joao Polo, Commented Nov 17, 2019 at 4:25

Danrley Pereira · Accepted Answer · 2021-07-12 22:40:38Z

You need to declare the prop type in Search Component and declare type to parameter too:

//use this type to both components (children and parent)
interface FuncProps {
    //here you can declare the return type (here is void)
    handleLocationChange: (values: any) => void;
}
//children start
// here are the tip, define the type in the React.FC and in the FC's parameters itself
const Search: React.FC<FuncProps> = (props: FuncProps) => {
    ... your component behavior and view ...
    return (
        {/*↓↓↓↓ use the prop like this ↓↓↓↓*/}
        <input onClick={props.handleLocationChange('something if you need')}/>
    )
};
//children end

// parent start
const Sidebar: React.FC<Props> = (props: FuncProps) => { 
return (
   <>
      <Search handleLocationChange={props.handleLocationChange} /> 
   </>
)
}
//parent end

I hope this answer can help who wants to use typescript and want to easy your own life passing functions through components (I don't recomend pass functions through many levels).

Daniel Duong · Accepted Answer · 2019-11-17 05:00:32Z

3

You need to declare handleLocationChange as a prop on the Search component

answered Nov 17, 2019 at 5:00

Daniel Duong

1,1126 silver badges11 bronze badges

2 Comments

Alwaysblue Over a year ago

This should be a comment

Daniel Duong Over a year ago

You have declared type Props for Sidebar which is the wrong component. Instead declare type Props on your Search component. That takes handle locationChange as a prop. You have a typeError because Search is receiving a prop it doesn't recognise. Search doesn't take locationChange according to the type declaration.

tareq aziz · Accepted Answer · 2020-06-02 01:51:02Z

0

Code your handler like a function, this way

function handleLocationChange(){
    console.log('Location Changed.');
  };

Then it should work

edited Jun 2, 2020 at 1:51

answered Nov 17, 2019 at 4:39

tareq aziz

7874 silver badges12 bronze badges

1 Comment

Josh Scott Over a year ago

This is a function inside of a functional component. I don't believe you can declare functions that way.

Collectives™ on Stack Overflow

Passing a function as a prop to a Typescript React Functional Component

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related