I cant the value of the element name - e.target.name returns undefined

Question

In onClick event i capture the event(e) in a function and trying to get the name of the element that was clicked

const ClickEvent = (e) => {
console.log(e.target.name) -> undefined
}

<svg>
<text onClick={ClickEvent} name="line1">
 hello world
</text>
</svg>

Answer 1

DOM attributes are not always available as direct named properties of the element. I would advise you to use the getAttribute() method to fetch the values of the attributes you want.

console.log(e.target.getAttribute('name'))

Answer 2

The best option would be to use the getAttributes method, as the DOM can be a little finicky sometimes.

const ClickEvent = (e) => {
   console.log(e.target.getAttribute('name'))
}

Similar question for more reference: event.target.name is undefined

Answer 3

There is no e.target.name method, try e.target and check the console to find the method you want.

I guess you mean e.target.localName?