CODEWITHSUNDEEP
javascriptreactjstypescript
Esnaj
Esnaj

Reputation: 5

React passing function as prop

i'm using typescript/react and i have this function from a class based component A:

    listUpdateFunction() {
        console.log("called update functions")
        this.setState({ shouldUpdate: true });
    }

which i am passing through as an prop to another component B. And using it for a submit button.

<button type="submit" onClick={this.props.listUpdateFunction}>Submit!</button>

My prop interface for class B is:

interface IProps {
    listUpdateFunction: Function;
}

I plan on using this function to call componentDidUpdate in class A. However my code doesn't compile for class B it says

(JSX attribute) React.DOMAttributes.onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined

Which I don't understand, reading this error message I'd assume that the function could be undefined but i think the interface would guarantee that it isn't null?

Upvotes: 0

Views: 107

Answers (1)

Rahul Arora
Rahul Arora

Reputation: 131

Try updating your interface

interface IProps {
    listUpdateFunction: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

Upvotes: 2

Related Questions