How to get data-attribute in React?

Question

I have this list:

    const chosen = (e: any) => console.log(e.target.dataset.value)

...
                <ul>
                  {numbers.map(n => (
                    <a data-value={n} onClick={chosen}>
                      <li key={n}>
                        {n}
                      </li>
                    </a>
                  ))}
                </ul>
...

It logs undefined.

Also tried this: console.log(e.target.getAttribute('data-value')) and it returns null.

How do I get the value from a tag?

Stack: TypeScript: 3.8.3, React: 16.13.1

isn't it just element.getAttribute(attributeName); ?

Red Baron
– Red Baron

2020-06-17 15:20:00 +00:00
Commented Jun 17, 2020 at 15:20 — Red Baron
– Red Baron, Commented Jun 17, 2020 at 15:20

Ross Allen · Accepted Answer · 2020-06-17 15:23:45Z

3

In frameworks like React and Vue you generally stay away from reading data from the DOM when possible. In this case, you can capture the value in a function:


    const chosen = (e: any, value: any) => console.log(value)

...
                <ul>
                  {numbers.map(n => (
                    <a key={n} onClick={(event) => { chosen(event, n); }}>
                      <li>
                        {n}
                      </li>
                    </a>
                  ))}
                </ul>
...

answered Jun 17, 2020 at 15:23

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sirwan Afifi · Accepted Answer · 2020-06-17 15:33:21Z

1

You can use the following code to do that:

export default function App() {
  function chosen(event) {
    const meta = event.target.parentNode.getAttribute("data-value");
    console.log(meta);
  }

  return (
    <ul>
      {numbers.map((n) => (
        <a data-value={n} onClick={chosen}>
          <li key={n}>{n}</li>
        </a>
      ))}
    </ul>
  );
}

answered Jun 17, 2020 at 15:33

Sirwan Afifi

10.8k14 gold badges67 silver badges111 bronze badges

Comments

Mario · Accepted Answer · 2020-06-17 15:34:17Z

0

li element should contentin the a element. Please try this example

import React from "react";

const numbers = [1, 2, 3, 4, 5];

function App() {
  function chosen(event) {
    event.preventDefault();

    console.log(event.target.dataset.value);
  }

  return (
    <ul>
      {numbers.map((number) => {
        return (
          <li key={number}>
            <a href="!#" onClick={chosen} data-value={number}>
              {number}
            </a>
          </li>
        );
      })}
    </ul>
  );
}

export default App;

And follow the Ross Allen advice

edited Jun 17, 2020 at 15:34

answered Jun 17, 2020 at 15:26

Mario

5,0044 gold badges42 silver badges65 bronze badges

Comments

Sachin · Accepted Answer · 2024-03-12 06:51:51Z

0

Access attributes from the currentTarget instead like this :

console.log(e.currentTarget.getAttribute('data-value'))

answered Mar 12, 2024 at 6:51

Sachin

1,43315 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to get data-attribute in React?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related