Getting data attributes with React.js

Question

Why do I have to put data-* in every html child attribute so i won't get undefined by clicking on parent? I.e

<li data-item="item-1">
  <img src="../img" alt="img" />
  <p>Some text</p>
</li>

By this example i will get item-1 whenever i click near the borders of <li> but whenever i click either img or text/paragraph i get undefined. But when I set data-item on <li> childs i get normal data value. What?

PS. The way i get data-* is for example

handleClick(event){
  let data = event.target.dataset['item']
}
...
<li data-item="item-1" onClick={this.handleClick.bind(this)}>...</li>

What am I doing wrong, that I have to put into every <li> child data-* so I won't get undefined on whole <li> block on<Event>?

Felix Kling · Accepted Answer · 2017-01-29 22:26:01Z

13

FYI, the problem has nothing to do with React. It's how DOM events in browsers work. Have a look at this quirksmode.org article to learn more about how event propagation works.

event.target will always refer to the element the event was triggered on. So if you click on the <p> element, event.target will refer to that element. Since <p> doesn't have a data-* attribute you get undefined.

To always get the element where the handler is bound to (i.e. the <li> element in your example), use event.currentTarget instead.

answered Jan 29, 2017 at 22:26

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

nehel Over a year ago

Hmm, indeed that solves the problem. Thanks for TL;DR and the article about event.targets

Collectives™ on Stack Overflow

Getting data attributes with React.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related