Get data attribute from Event object in React

avatar

Borislav Hadzhiev

Sun May 01 20222 min read

banner

Photo by Julie Kwak

Get data attribute from Event object in React #

Use the target.dataset property to access data attributes from the event object in React. The dataset property provides read and write access to the custom data attributes of the element. The property returns a Map of strings which can be converted to an object.

App.js
export default function App() { const handleClick = event => { console.log(event.target.dataset); console.log(event.target.getAttribute('data-test-id')); }; const handleChange = event => { console.log(event.target.dataset); console.log(event.target.getAttribute('data-attr')); }; return ( <div> <button onClick={handleClick} data-test-id="my-btn"> Click </button> <input onChange={handleChange} data-attr="my-input" /> </div> ); }

get data attribute from event

We set the onClick prop on the button, so every time it is clicked, the handleClick function is invoked.

The target property on the event gives us a reference to the element that triggered the event (could be a descendant).

Whereas the currentTarget property on the event gives us access the element that the event listener is attached to.

If the target property refers to a descendant element in your scenario and you need access to the element that the event listener is attached to, simply replace target with currentTarget.

App.js
export default function App() { const handleClick = event => { console.log(event.currentTarget.dataset); console.log(event.currentTarget.getAttribute('data-test-id')); }; const handleChange = event => { console.log(event.currentTarget.dataset); console.log(event.currentTarget.getAttribute('data-attr')); }; return ( <div> <button onClick={handleClick} data-test-id="my-btn"> Click </button> <input onChange={handleChange} data-attr="my-input" /> </div> ); }

We used the dataset property to get a Map of strings that contains the data attributes of the element.

The property returns a read-only Map of strings containing the custom data attributes of the element.

The dataset property itself is read-only. If you need to update a specific property, you must access the nested property.

App.js
event.currentTarget.dataset.testId = 'updated-test-id';

If you need to convert the DOM string Map into a native JavaScript object, you can use the spread syntax (...).

App.js
const handleClick = event => { const map = event.currentTarget.dataset; const obj = {...map}; console.log(obj); };

An alternative approach is to use the getAttribute method on the element.

App.js
const handleClick = event => { console.log(event.currentTarget.getAttribute('data-test-id')); console.log(event.currentTarget.getAttribute('data-bar')); };
Notice that when passing an attribute name to the getAttribute method, we have to provide the complete name, including the data- part.

As opposed to when accessing a property on the dataset Map, where the data- part is excluded.

If the attribute is not found on the DOM element, the getAttribute method will return null or an empty string.

Use the search field on my Home Page to filter through my more than 1,000 articles.