Type the onClick event of an element in React (TypeScript)

avatar

Borislav Hadzhiev

Last updated: Apr 17, 2022

banner

Photo from Unsplash

Type the onClick event of an element in React (TypeScript) #

To type the onClick event of an element in React, set its type to React.MouseEvent<HTMLElement>. The MouseEvent interface is used to type onClick events in React.

App.tsx
import React from 'react'; const App = () => { const handleClick = (event: React.MouseEvent<HTMLElement>) => { console.log(event.target); console.log(event.currentTarget); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }; export default App;

We typed the event as React.MouseEvent<HTMLElement> because the MouseEvent type is used for onClick events in React.

However, we could have been more specific when typing the event.

The easiest way for you to find out what the type of an event is, is to write the event handler inline and hover over the event parameter in the function.
App.tsx
const App = () => { // 👇️ onClick event is written inline // hover over the `event` parameter with your mouse return ( <div> <button onClick={event => console.log(event)}>Click</button> </div> ); }; export default App;

get type of click event inline

When the event is written inline, I can hover over the event parameter and it shows me what the type of the event is.

TypeScript is able to infer the type of the event when it's written inline.

This is very useful because it works with all events. Simply write a "mock" implementation of your event handler inline and hover over the event parameter to get its type.

Once you know what the type of the event is, you are able to extract your handler function and type it correctly.

Now that we know that the correct type for the onClick event in the example is React.MouseEvent<HTMLButtonElement, MouseEvent>, we can extract our handler function.

App.tsx
import React from 'react'; const App = () => { const handleClick = ( event: React.MouseEvent<HTMLButtonElement, MouseEvent>, ) => { console.log(event.target); console.log(event.currentTarget); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }; export default App;
Note that you can use this approach to get the type of all events, not just onClick events.

As long as you write the event handler function inline and hover over the event parameter, TypeScript will be able to infer the event's type.

The currentTarget property on the event gives us access to the element that the event listener is attached to.

On the other hand, the target property on the event gives us a reference to the element that triggered the event (what the user clicked on).

Let's look at an example of how we would use the same approach to get the type of an onClick event on a div element.

App.tsx
const App = () => { // 👇️ onClick event is written inline // hover over the `event` parameter with your mouse return ( <div> <div onClick={event => console.log(event)}>Click</div> </div> ); }; export default App;

get type of onclick event

All we had to do to get the type of the onClick event is - write it inline on the element and hover over the event parameter.

Now that we have the type, we can extract the event handler into a function and type it correctly.

App.tsx
import React from 'react'; const App = () => { const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { console.log(event.target); console.log(event.currentTarget); }; return ( <div> <div onClick={handleClick}>Click</div> </div> ); }; export default App;
Note that you can use this approach to get the type of all events, not just onClick events.

As long as you write the event handler function inline and hover over the event parameter, TypeScript will be able to infer the event's type.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.