Studytonight is now part of the GUVI universe. Explore GUVI →
🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
  Signup/Sign In
Tests
MCQs to test your knowledge.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

How to access custom attributes from event object in React?

If you want to use a custom attribute, you should prefix it with data-

<div data-custom-attribute="foo" />

And that's great news except I can't find a way to access it from the event object e.g.:

render: function() {

...

<a data-tag={i} style={showStyle} onClick={this.removeTag}></a>

...

removeTag: function(event) {

    this.setState({inputVal: event.target????}); 

},


The element and data- property render in html fine. Standard properties like style can be accessed as event.target.style fine. Instead of event.target I tried:

 event.target.props.data.tag

 event.target.props.data["tag"]

 event.target.props["data-tag"]  

 event.target.data.tag

 event.target.data["tag"]

 event.target["data-tag"]


none of these worked.
reactjs javascript
by

3 Answers

espadacoder11
To help you get the desired outcome in perhaps a different way than you asked:


render: function() {

    ...

    <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>

    ...

},

removeTag: function(i) {

    // do whatever

},

Notice the bind(). Because this is all javascript, you can do handy things like that. We no longer need to attach data to DOM nodes in order to keep track of them.

IMO this is much cleaner than relying on DOM events.
sandhya6gczb
event.target gives you the native DOM node, then you need to use the regular DOM APIs to access attributes. Here are docs on how to do that:Using data attributes.

You can do either event.target.dataset.tag or event.target.getAttribute('data-tag'); either one works.
RoliMishra
Here's the best way I found:

var attribute = event.target.attributes.getNamedItem('data-tag').value;

Those attributes are stored in a "NamedNodeMap", which you can access easily with the getNamedItem method.

Login / Signup to Answer the Question.

LoginSignup