CODEWITHSUNDEEP
javascriptreactjstypescriptreact-functional-component
Emille C.
Emille C.

Reputation: 612

React functional <a> component with onClick and TypeScript

I'm writing a react component in TypeScript:

interface Props {
  children: React.ReactNode;
  href: string;
  onClick?: (e: any) => void;
}

const Input: React.FC<Props> = ({ children, href, onClick }) => (
  <a className="A" href={href} onClick={onclick(e)}>
    {children}
  </a>
);

export default Input;

But I get the following error:

The 'this' context of type 'void' is not assignable to method's 'this' of type 'Window'.ts(2684)

I'm not sure about what I'm doing wrong, any help will be welcome!

Upvotes: 0

Views: 2028

Answers (1)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22895

Don't call onClick(), just pass reference as prop

const Input: React.FC<Props> = ({ children, href, onClick }) => (
  <a className="A" href={href} onClick={onClick}>
    {children}
  </a>
);

Upvotes: 3

Related Questions