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

import { forwardRef } from "react";
import { Box } from "@chakra-ui/react";
import { HiOutlineMenu } from "react-icons/hi";

type THamburgerProps = React.ComponentPropsWithoutRef<"button">;

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

Hamburger.displayName = "Hamburger";

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