How to access data attributes from event object

Question

var Hello = React.createClass({
  handleClick(event){
    console.log('target info', event.currentTarget);
    console.log('event info', event);
    var sortOrder = event.currentTarget.sortorder;

    console.log('sortOrder: ', sortOrder);
    alert(sortOrder);//Should say "asc"
  },
  render: function() {
    return <div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" onClick={this.handleClick}>Click Here Please</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Expected Output: asc
Actual: undefined

Possible duplicate of [Access 'data-' attribute without jQuery](http://stackoverflow.com/questions/15912246/access-data-attribute-without-jquery) — Felix Kling, Jun 20 '16 at 19:05
This doesn't seem to have anything specifically to do with React, rather with the lack of understanding how `data-` attributes work. — Felix Kling, Jun 20 '16 at 19:06
@FelixKling - `event` is a [SyntheticEvent](https://facebook.github.io/react/docs/events.html#syntheticevent) right? Don't you need to understand how to navigate `SyntheticEvent`? — P.Brian.Mackey, Jun 20 '16 at 19:09
Well, it has the same API as the normal event object and `event.currentTarget` is a plain old DOM element. — Felix Kling, Jun 20 '16 at 19:10

score 73 · Accepted Answer · edited Jan 31 '19 at 07:26

73

I updated your fiddle:

I was able to do it just by referencing with "getAttribute"

 event.target.getAttribute("data-sortorder");

this is with refs https://jsfiddle.net/69z2wepo/46265/

 var sortOrder = this.refs.tester.getAttribute("data-sortorder");
 alert(sortOrder);//Should say "asc"
},
  render: function() {
    return <div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" ref="tester" onClick={this.handleClick}>Click Here Please</div>;
  }
});

Do this:-

change your element, by adding a "ref" attribute.

div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" ref="tester" onClick={this.handleClick}

Then get that attribute like so: this.refs.tester.getAttribute("data-sortorder")

OR PER ORIGINAL REQUEST, w/o REFS:

Or per "event specific" -- it worked properly referencing it like so: event.target.getAttribute("data-sortorder");

edited Jan 31 '19 at 07:26

Reema Parakh

1,275
2
18
40

answered Jun 20 '16 at 19:00

james emanon

10,145
7
45
77

`event.target.getAttribute("data-sortorder");` is what I wanted. Glad we were able to do this without refs :). I'll make it when the timer runs down. – P.Brian.Mackey Jun 20 '16 at 19:04
Why is a ref better than using the `event` object? – Felix Kling Jun 20 '16 at 19:05
10

Instead of using `event.target.getAttribute("data-sortorder");` you should utilize dataset. `event.target.dataset.sortorder`. See https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes – Niko9911 Sep 11 '20 at 08:14

score 1 · Answer 2 · answered Dec 29 '21 at 15:28

1

All custom HTML atributes can be accessed through event itself:

event.target.attributes.MYATRIBUTE.value

answered Dec 29 '21 at 15:28

Vinicius Ribeiro

61
4

score 0 · Answer 3 · answered Feb 21 '22 at 20:18

Like @Niko9911 already mentioned in a comment, you can access all data attributes from the element.dataset property.

You could use getAttribute() with their full HTML name to read them, but the standard defines a simpler way: a DOMStringMap you can read out via a dataset property. MDN

You can read the data, and you can also set the attribute to something new.

const element = document.querySelector('.something');
element.addEventListener('click', handeClick);

function handeClick(e) {
  // READ
  console.log(e.currentTarget.dataset.test);

  //WRITE
  e.currentTarget.dataset.test = 'bar';
  console.log(e.currentTarget.dataset.test);
}

<a class="something" data-test="foo">Click me.</a>

How to access data attributes from event object

3 Answers3