How to get value of data custom-attribute in JSX / React

Question

Let's say I create a data-custom attribute in JSX element to save some meta-data about that element.

Like:

return (
    <button data-customData="red" onClick={(ev) => { console.log(ev.target.customData)}}>Teste</button>
)

If I try to acess the data-custom attribute like you see in the code I will get undefined.

But If I try something like ev.target.style or ev.target.id I will not get undefined.

What is the difference and how can we acess this value ?

`ev.target.value;` Referencing https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs — Qifeng Li, Nov 13 '22 at 22:16
Does this answer your question? [How can I get the data-id attribute?](https://stackoverflow.com/questions/5309926/how-can-i-get-the-data-id-attribute) — Konrad, Nov 13 '22 at 22:27
```ev.target.dataset.customData``` and ```ev.target.getAttribute('data-customData')``` work ! — Simao, Nov 13 '22 at 22:27

score 0 · Accepted Answer · answered Nov 13 '22 at 22:55

you're not calling the right value, you are calling a property called customData but the attribute name is data-customData, and in order to get the value you need to change how you call the attribute using the getAttribute function that the element (ev.target) provides

return (
 <button
  data-customData="red"
  onClick={(ev) => {
   const element = ev.target;
   console.log(element.getAttribute("data-customData"));
  }}
 >
   Click Me
 </button>
)

The thing you're trying to is not a very common pattern and if you want to get a value from the user you should use the right control (input, radio, select) instead of using a data attribute.

How to get value of data custom-attribute in JSX / React

1 Answers1