React Typescript: Passing onClick as a Prop

Question

I am trying to create a simple Hamburger Menu component using React & Typescript. What I want to do is to pass the onClick event handler to this menu componunent as a prop. This is the code that I currently have:

function Hamburger({ onClick }) {
  return (
    <Box
      as="button"
      type="button"
      p="1"
      fontSize="2xl"
      color="gray.600"
      onClick={onClick}
      display={{ base: "block", lg: "none" }}
    >
      <HiOutlineMenu />
    </Box>
  )
}

However, typescript complains about the {onClick} prop that is being passed:

Binding element 'onClick' implicitly has an 'any' type

I thought that I could fix this by hovering over the onClick key in the Box component and seeing what type onClick takes. Hovering over that key produces the following message:

As such, I thought to modify the {onClick} prop as follows:

function Hamburger({ onClick }: React.MouseEventHandler | undefined) {

But that just produces a new error on {onClick} :

Property 'onClick' does not exist on type 'MouseEventHandler<Element> | undefined'.ts(2339)
var onClick: any

I am now at a loss of what to do. As such, I am wondering -- how should I type {onClick} ?

Thanks.

Answer 1

Correct typing for your Hamburger functional component is:

function Hamburger({ onClick }: { onClick? : React.MouseEventHandler }): JSX.Element {
    // actual code
}

As number of props grow, inline type declarations may get messy. So, it's a good habit to move them into designated type:

type Props = {
    onClick?: React.MouseEventHandler
}

function Hamburger({ onClick }: Props) JSX.Element {
    // actual code
}

It also has benefits if later you'll have to accept children prop in this component. Then you may use React.FC helper with Props type:

const Hamburger: React.FC<Props> = ({ onClick, children }) => { // no need to type `children` prop yourself
    // actual code
}

Answer 2

It is better to use types provided by react. Consider this:

import React, { FunctionComponent, MouseEventHandler } from 'react';

interface Props {
  onClick?: MouseEventHandler;
}

const Button: FunctionComponent<Props> = ({ onClick }) => (
    <Box
      as="button"
      type="button"
      p="1"
      fontSize="2xl"
      color="gray.600"
      onClick={onClick}
      display={{ base: "block", lg: "none" }}
    >
      <HiOutlineMenu />
    </Box>
);

Answer 3

type THamburgerProps = {
  onClick: () => void;
}

function Hamburger({ onClick }: THamburgerProps) {
  return (
    <Box
      as="button"
      type="button"
      p="1"
      fontSize="2xl"
      color="gray.600"
      onClick={onClick}
      display={{ base: "block", lg: "none" }}
    >
      <HiOutlineMenu />
    </Box>
  )
}

function App(){
  return <Hamburger onClick={() => console.log("hanburger clicked!")}
}