React Onclick - No overload matches this call

Question

New to TS and got to say the errors are not very friendly.

I'm trying to pass a hook function to a component as a prop which I've added to my interface and I get this error which I can not understand.

No overload matches this call. Overload 1 of 2, '(props: Pick, HTMLButtonElement>, "form" | ... 264 more ... | "onTransitionEndCapture"> & { ...; } & IButtonProps, "form" | ... 267 more ... | "setActivity"> & Partial<...>, "form" | ... 267 more ... | "setActivity"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Property 'setActivity' is missing in type '{ children: string | (string & {}) | (string & ReactElement ReactElement Component)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal); active: Boolean; onClick: () => Function; }' but required in type 'Pick, HTMLButtonElement>, "form" | ... 264 more ... | "onTransitionEndCapture"> & { ...; } & IButtonProps, "form" | ... 267 more ... | "setActivity"> & Partial<...>, "form" | ... 26

I've tried a few things that I've read like putting the method in an anonymous function and setting my interfact onclick to be (e: React.MouseEvent) => void, but none seems to be working. From my code I feel like I'm doing everything correctly but obviously not.

Here is my component:

interface IButtonProps {
  children: string,
  active: Boolean,
  setActivity: Function,
  onClick: (e: React.MouseEvent) => void,
}


// Styling
const Button = styled.button<IButtonProps>`
  ${({ theme }) => `
    border: ${theme.TabsBorder};
    font-size: ${theme.TabsFontsize};
    background-color: transparent;
    flex: 1;
    padding: 1rem;
    outline: 0;

    &:hover {
      background-color: ${theme.TabActiveBackground};
      color: ${theme.TabActiveColour};
    }

    ${({ active }) => active && `
      background-color: ${theme.TabActiveBackground}
      color: ${theme.TabActiveColour};
    `}
  `}
`;

const Item: FC<IButtonProps> = ({
  children,
  active,
  setActivity,
}) => (
  <Button
    active={active}
    onClick={() => setActivity}
  >
    {children}
  </Button>
);

SetActivity is the hook that I'm passing into the component to reference.

Sam Ewdala Sam Ewdala · Accepted Answer · 2020-03-07T13:10:40

the onClick method is returning a Function setActivity: Function which should not be. it should be the execution of it

onClick={() => setActivity()}

or if the setActivity function is already self binded you can pass it on to the onClick prop right away

onClick={setActivity}

also IButtonProps has setActivity as property. which means you must pass it on to the Button component

const Item = (props: any) => {
    const { children, active, setActivity, } = props;
    return (
        <Button
             active={active}
             setActivity={() => {}}
             onClick={() => setActivity()}
        >
             {children}
        </Button>
     );
};

React Onclick - No overload matches this call

1 Answers