Property 'name' does not exist on type 'EventTarget' - React + TypeScript

Question

This is my code:

<Button
  disabled={filter === 'Active'}
  size='md'
  color='primary'
  name='Active' // complete = false
  onClick={this.handleFilterClick}
>
  Active
</Button>

On my function handler I get error on the event:

handleFilterClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    // continue here
     const { name } = e.target;

It says:

Property 'name' does not exist on type 'EventTarget'.

I also tried:

(e:  React.MouseEvent<HTMLInputElement, MouseEvent> &  React.MouseEvent<HTMLButtonElement, MouseEvent>) 

What is the event type for button? In JavaScript, this works, it can accept name but I don't know why not typescript?

Answer 1

event.target is the element from which element is dispatched, which necessarily doesn't have to be the HTMLButtonElement defined in the event.

However, if you use event.currentTarget, you will see that this error goes away:

const { name } = event.currentTarget;

If you have to use event.target itself, you would have to cast the object:

const { name } = event.target as HTMLButtonElement;

From the typings:

/**
  * currentTarget - a reference to the element on which the event listener is registered.
  *
  * target - a reference to the element from which the event was originally dispatched.
  * This might be a child element to the element on which the event listener is registered.
  * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
*/