I can access value of className and id by using boardRef.current.className and boardRef.current.id, but if I use boardRef.current.data-board then I get "cannot read properties of undefined". Is there any way to access data attribute using useRef hook?
import React, {useState, useRef} from 'react';
export default function App() {
const boardRef = useRef();
const getData = () => {
console.log(boardRef.current.data-board);
}
getData();
return (
<div className="App">
<h1>Tic Tac Toe</h1>
<div ref={boardRef} className="board" id="boardOne" data-board="one"></div>
</div>
);
}
Using React#useEffect and Element#getAttribute:
const getData = () => {
console.log(boardRef.current.getAttribute("data-board"));
};
React.useEffect(() => {
getData();
}, []);