React TypeScript onClick Type

When working with React and TypeScript, it is important to define the type of onClick event for elements. This helps prevent runtime errors and ensures a more robust codebase.

Defining onClick types

The type definition for onClick event is as follows:

type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;

This type specifies that onClick event takes a mouse event and returns nothing. However, we can specify that the event should return something by adding a return type to the handler function.

For example, if we have a button that increments a counter when clicked, we might define our onClick handler like this:

const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
  setCount(count + 1);
};

This onClick handler takes a mouse event of type HTMLButtonElement and returns nothing. It simply updates the component's state by incrementing a counter.

Optional onClick properties

In some cases, we may want to define an onClick property that is optional. For example, we might have a component that can be clicked to toggle a menu, but it can also be controlled via props. In this case, we can define our props interface like this:

interface Props {
  onClick?: React.MouseEventHandler<HTMLDivElement>;
  active: boolean;
}

This interface defines an optional onClick property that takes a mouse event of type HTMLDivElement, and a required active property of type boolean.

Conclusion

Defining onClick types is an important part of building robust React applications with TypeScript. By specifying types for our click handlers, we can catch errors at compile-time and ensure that our components behave as expected.