React with TypeScript - Property 'value' does not exist on type 'EventTarget'

Question

I've created a function that fires on button clicks that sets a value to a filter. It works fine however I get the TypeScript error.

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

Heres my button function that fires onClick:

  const handleFilterButtonChange = (event: MouseEvent<HTMLButtonElement>) => {
    setTerm(event.target.value);
  };

CertainPerformance · Accepted Answer · 2021-06-04 15:15:20Z

4

The HTMLButtonElement generic indicates the element the listener is attached to, but said element is not necessarily the target. See here for an example:

const handleFilterButtonChange = (event) => {
  console.log(event.target);
};
document.querySelector('div').addEventListener('click', handleFilterButtonChange);

<div>
  <button>click</button>
</div>

Above, the listener is attached to the <div>, but the event.target is the button, since the button was the innermost element clicked.

That's why TypeScript is giving you a warning. Use .currentTarget instead, which will refer to the element the listener is attached to:

const handleFilterButtonChange = (event: MouseEvent<HTMLButtonElement>) => {
    setTerm(event.currentTarget.value);
};

answered Jun 4, 2021 at 15:15

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React with TypeScript - Property 'value' does not exist on type 'EventTarget'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related