React Hooks : How to access custom attribute value?

Question

I want to access custom attribute value using react hooks

Here is code

<div ref={cardNameRef} value="card-1" card-status="yes">Card 1</div>

<button onClick ={setData} className="btn btn-info">Select</button>

I want to access the card-status value.

Here is what I have tried

......
const cardNameRef = useRef();
 ....
  const setData = () => {
    let status = cardNameRef.current.getAttribute('cardStatus');
    console.log('status', status);
  }

Unfortunately, I get the following status null

What is wrong here?

Di you try getAttribute('card-status')

Haseeb Ahmad
– Haseeb Ahmad

2021-03-16 01:27:27 +00:00
Commented Mar 16, 2021 at 1:27 — Haseeb Ahmad
– Haseeb Ahmad, Commented Mar 16, 2021 at 1:27

morgan-wu · Accepted Answer · 2021-03-16 03:08:29Z

3

You can get your custom attribute by below code.

function CustomAttr() {
  const cardNameRef = useRef();
  const setData = () => {
    let status = cardNameRef.current.getAttribute("card-status");
    console.log("status", status);
  };
  return (
    <div>
      <div ref={cardNameRef} value="card-1" card-status="yes">
        Card 1
      </div>

      <button onClick={setData} className="btn btn-info">
        Select
      </button>
    </div>
  );
}

answered Mar 16, 2021 at 3:08

morgan-wu

991 bronze badge

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

Comments

Christophe · Accepted Answer · 2021-03-16 02:48:03Z

0

As a general rule you need to use an attribute or prop name as is. If you call it card-status, use card-status. If you call it cardStatus then use cardStatus. So this should work:

let status = cardNameRef.current.getAttribute('card-status');

In your case, card-status is not a standard div attribute anyway. I would suggest to change it to data-status or data-cardStatus.

edited Mar 16, 2021 at 2:48

answered Mar 16, 2021 at 2:42

Christophe

28.3k29 gold badges105 silver badges145 bronze badges

Collectives™ on Stack Overflow

React Hooks : How to access custom attribute value?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related