How to access data attributes from event object

Question

jsfiddle

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

Answer 1

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:-

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

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

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

OR PER ORIGINAL REQUEST, w/o REFS:

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