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?

Answer 1

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>
  );
}