How to access custom attributes from event object in React?

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

3 years ago by Kajalsi45d

3 Answers

Login / Signup to Answer the Question.

Login Signup

**espadacoder11** · Answer 1 · 2021-07-03T11:40:34

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** · Answer 2 · 2021-07-05T13:10:54

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** · Answer 3 · 2021-07-06T12:33:57

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.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

How to access custom attributes from event object in React?

3 Answers

Login / Signup to Answer the Question.