score:0

Accepted answer

For functions like onClick, you have to describe input arugments and output or just write Function (although for better type checking you shouldn't just write Function).

So something like this:

onClick: () => void

If for example your function gets a number and returns a string, you should write it like this:

onClick: (n: number) => string

score:0

Parent Component:

interface OnClickIdInterface {
    (): void,
}

export interface parentPropsInterface {
    onClick?: OnGetIdInterface;
}
 
render() {
    return <ChildComponent onClick={(id) => this.onClick(id)}/>
 }

Child Component:

const HomePresentation: React.FunctionComponent<parentPropsInterface> = ({onClick}) => {
    return (
        <div onClick={()=>onClick()}>
           some content
        </div>
    )
}

score:0

Following code should work. But it depends on ButtonComponent. Used React.MouseEventHandler<T = Element> as type.

export interface ChildComponentProps {
   onClick: React.MouseEventHandler<ButtonComponent>
}

export function ChildComponent({onClick}: ChildComponentProps) {
   ...
   return ( 
            <div>
            ...
               <ButtonComponent 
                  onClick={() => onClick()}
                  ...
               />
            ...
           );
}

Please notify me if this is incorrect.


Related Query

More Query from same tag