React TypeScript - passing a callback function

Question

The following code would have worked happily in JavaScript. I am using React+TypeScript, hence this is a JSX file:

Calling component:

<FiltersPanel onFiltersChanged={() => { console.log('I was called') }} />

Inner Component:

const FiltersPanel = (onFiltersChanged) => {

    const handleFiltersChange = () => {
        onFiltersChanged(); /* I am getting `TypeError: onFiltersChanged is not a function` */
    };

    return (<div onClick={handleFiltersChange}/> );
};

export default FiltersPanel;

Why is TypeScript complaining that it cannot find the function, while the function is certainly passed as a prop.

Is onFiltersChanged null?

HFR1994
– HFR1994

2019-08-27 02:01:43 +00:00
Commented Aug 27, 2019 at 2:01 — HFR1994
– HFR1994, Commented Aug 27, 2019 at 2:01

JkAlombro · Accepted Answer · 2019-08-27 02:02:44Z

4

You passed the function as a props so you should receive it to your component as a props like this

const FiltersPanel = (props) => {  }

then use it like this

props.onFiltersChanged()

OR you can use destructuring like this

const FiltersPanel = ({onFiltersChanged}) => { }

so you can use it without the props object like this

onFiltersChanged()

answered Aug 27, 2019 at 2:02

JkAlombro

1,8441 gold badge20 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

React TypeScript - passing a callback function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related