Setting data attributes in React

avatar

Borislav Hadzhiev

Last updated: May 1, 2022

banner

Check out my new book

Setting data attributes in React #

To set a data attribute on an element in React, set the attribute directly on the element, e.g. <button data-test-id="my-btn"> or use the setAttribute() method, e.g. el.setAttribute('data-foo', 'bar'). You can access the element on the event object or using a ref.

App.js
export default function App() { const handleClick = event => { console.log(event.target.dataset); // 👇️ "my-btn" console.log(event.target.getAttribute('data-test-id')); // 👇️ set attribute event.target.setAttribute('data-foo', 'bar'); console.log(event.target.getAttribute('data-foo')); // 👉️ bar event.target.setAttribute('data-foo', 'baz'); console.log(event.target.getAttribute('data-foo')); // 👉️ baz }; return ( <div> {/* 👇️ set data-test-id attribute */} <button onClick={handleClick} data-test-id="my-btn"> Click </button> </div> ); }

react set data attribute

If you need to access the element via a ref and not on the event object, scroll down to the next section.

We can directly set a data attribute on an element by using data-* syntax.

App.js
<button onClick={handleClick} data-test-id="my-btn"> Click </button>

Notice that we don't camelCase custom data-* properties.

The example shows how to use the setAttribute() method in an event to set or update a data attribute programmatically.

App.js
event.target.setAttribute('data-foo', 'bar');

The method takes the following 2 parameters:

  1. name - the name of the attribute to be set.
  2. value- the value to assign to the attribute.
If the attribute already exists on the element, the value is updated, otherwise a new attribute is added with the specified name and value.

If you need to remove an attribute from the element, you can use the removeAttribute method.

index.js
el.removeAttribute('data-foo');

The removeAttribute method removes the attribute with the specified name from the element.

If the attribute does not exist on the element, the method returns without throwing an error.

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

App.js
const handleClick = event => { console.log(event.target.dataset); // 👇️ "my-btn" console.log(event.target.getAttribute('data-test-id')); // 👇️ set attribute event.target.setAttribute('data-foo', 'bar'); console.log(event.target.getAttribute('data-foo')); // 👉️ bar event.target.setAttribute('data-foo', 'baz'); console.log(event.target.getAttribute('data-foo')); // 👉️ baz };
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
const handleClick = event => { console.log(event.currentTarget.dataset); // 👇️ "my-btn" console.log(event.currentTarget.getAttribute('data-test-id')); // 👇️ set attribute event.currentTarget.setAttribute('data-foo', 'bar'); console.log(event.currentTarget.getAttribute('data-foo')); // 👉️ bar event.currentTarget.setAttribute('data-foo', 'baz'); console.log(event.currentTarget.getAttribute('data-foo')); // 👉️ baz };

Alternatively, you can use a ref to access the DOM element to set its data attribute.

App.js
import {useRef} from 'react'; export default function App() { const ref = useRef(null); const handleClick = () => { console.log(ref.current.dataset); // 👇️ "my-btn" console.log(ref.current.getAttribute('data-test-id')); // 👇️ set attribute ref.current.setAttribute('data-foo', 'bar'); console.log(ref.current.getAttribute('data-foo')); // 👉️ bar ref.current.setAttribute('data-foo', 'baz'); console.log(ref.current.getAttribute('data-foo')); // 👉️ baz }; return ( <div> <button ref={ref} onClick={handleClick} data-test-id="my-btn"> Click </button> </div> ); }

This code sample achieves the same result, however we used a ref to access the DOM element.

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the button element on which we set the ref prop.

When we pass a ref prop to an element, e.g. <button ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

The current property on the ref gives us access to the button element, so we can set a data attribute on the element with ref.current.setAttribute('data-foo', 'bar').

Make sure to access the ref in the useEffect hook or when an event occurs because if you try to access the ref immediately, it might not be set up yet or the element might not be in the DOM yet.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.