How do I fix "[ts] Property 'getAttribute' does not exist on type 'EventTarget'"

Question

I am trying to create an onClick event type to capture the target attribute in React while using TypeScript. But I am getting the error "[ts] Property 'getAttribute' does not exist on type 'EventTarget'." Can anyone help provide insight into best practice on how to fix this?

I tried to use another helper function for the event.target part. That way I can typeset this part, and the getAttribute part in this function. However, I was told this is not best practice and wrong approach.

const Option = (props: OptionProps) => {

  const HandleOptionChange = (event: React.MouseEvent<HTMLLIElement>) => {
    return props.onOptionChange(event.target.getAttribute('value'));
  }

  return (
    <li
      key={props.key}
      value={JSON.stringify(props.word)}
      onClick={HandleOptionChange}
    >
      {props.word.value}
    </li>
  )
}

ts error message:

[ts] Property 'getAttribute' does not exist on type 'EventTarget'. any

score 8 · Answer 1 · answered Jun 30 '19 at 20:04

8

this works for me

const HandleOptionChange = (event: React.MouseEvent<HTMLLIElement>) => {
    const el = event.target as HTMLInputElement
    return props.onOptionChange(el.getAttribute('value'));
  }

i've just added HTMLInputElement as event.target type

answered Jun 30 '19 at 20:04

Davit Yeritsyan

239
1
2
6

Why `React.MouseEvent` isn't enough? – Eric Burel Apr 21 '20 at 06:59
Typescript doesn't assume that the event target is an element regardless of where the listener resides, see: https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript – Mr. Dave Oct 24 '20 at 19:41
Note: this is incorrect. See my answer as to why. `target` isn't necessarily the element that your listener is attached to. `target` is the lowest child of the listener that the event is attached to, which you can't guarantee is a specific type of element. In OP's case, since
is the lowest child, it will be the same, but JS can't predict the DOM structure. Trying to force-coerce the type is dangerous, and leads to misunderstandings on what the values on the event are. If your
contained an , and the user clicked it, the
event `target` would return the , not the
.

Armel Chesnais

Nov 19 '22 at 22:09

score 5 · Answer 2 · answered Jan 18 '22 at 01:38

Old question, but in case anyone else comes across it, here's an answer:

You should be using event.currentTarget instead of event.target

event.currentTarget points to the element on which you've attached the listener. In this case, it is the HTMLLIElement, as specified by React.MouseEvent<HTMLLIElement>

event.target on the other hand, is the element that originated the event, which may not be the one the listener is attached to! Any of the children of <li> could start a mouse event if they're clicked. Since the type of element is unknown, as it could literally be anything(<p> or <img> or <div> or anything else), typescript cannot confirm that any of the values/methods exist on it.

consider this:

return (
  <li
    key={props.key}
    value={JSON.stringify(props.word)}
    onClick={HandleOptionChange}
  >
    content of the li
    <div>
      header title for the image
      <img src="https://example.image.source/" />
    </div>
  </li>
)

You could click on the image and event.target would be the <img> element, which does not have a value attribute, which would make your code throw an error. Same thing would happen if you clicked on "header title for the image", the event.target would be the <div> element.

Using event.currentTarget will always return the <li> element that the listener is attached to in all those scenarios. Your code will then behave as you would expect it to in all of those instead of throwing errors.

As an aside, for anyone looking at this question for other similar circumstances: Davit's answer is addressing the symptom without addressing the cause, and could hide away bugs from your linter in your own codebase. Make sure you understand why you're getting an error so you can fix it instead of just hiding it.

Thanks needed this! e.target would throw an error about e.target.getAttribute What was required was e.currentTarget — Omar, Jul 19 '22 at 18:18
A note for anyone reading through this quickly - this won't work if you attached your event listener to the `document`, or somewhere besides the actual element firing the event you're listening for. (I tried swapping, and got a runtime error for `currentTarget.matches()` not being a function - which makes sense, reading this. `target` worked just fine, as you would expect. — Andrew, Nov 03 '22 at 20:24
@Andrew The point of the answer is that `target` doesn't work fine if not trying to refer to the leaf child in the element chain. Intuitive approach to event listeners from those new to JS, is that the element with the listener to is the `target`. It isn't. `target` is always the lowest child initiating the event, but `currentTarget` is the element you attached the listener to. When attaching to `document` or other non-DOM elements, `currentTarget` will refer to those. In the case of `document`, it doesn't have `.matches()` in the spec: https://developer.mozilla.org/en-US/docs/Web/API/Document — Armel Chesnais, Nov 19 '22 at 22:03

score -1 · Answer 3 · answered Jun 16 '22 at 09:47

-1

Was facing the same issue and I solved it by explicitly telling TS what type the currentTarget will be:

const handleToggle = (event: { currentTarget: HTMLButtonElement | null }) => 
  {
    const state = event.currentTarget?.getAttribute('aria-checked');
    // do some crazy stuff
  };

answered Jun 16 '22 at 09:47

zeekrey

391
6
16

Note: this is incorrect. See my answer as to why. `target` isn't necessarily the element that your listener is attached to. `target` is the lowest child of the listener that the event is attached to, which you can't guarantee is a specific type of element. In OP's case, since
is the lowest child, it will be the same, but JS can't predict the DOM structure. Trying to force-coerce the type is dangerous, and leads to misunderstandings on what the values on the event are. If your
contained an , and the user clicked it, the
event `target` would return the , not the
.

Armel Chesnais

Nov 19 '22 at 22:09

How do I fix "[ts] Property 'getAttribute' does not exist on type 'EventTarget'"

3 Answers3