use ref didn't work - counterElement.getElementById is not a function

Question

im trying to get my counter div by ref, but it gives me an error "counterElement.getElementById is not a function"

export default function CountersCube() {
    const counterWrapper = useRef(null)
    
    useEffect(() => {
        const [counterElement] = counterWrapper.current.children
        const counter = counterElement.getElementById("counter");
        console.log(counter)
    })



  return (
    <div className="countersCubeContainer">
        <div ref={counterWrapper}>
                <div id="counter" data-target="60000">0</div>
        </div>
    </div>
  )
}

Answer 1

getElementById is a property of the document object, not of every element.

Use element.querySelector('#id') instead.

That said, the element with that id is a child of counterElement so you won't find it by searching it's descendants.

Just use counterElement directly. Better yet, put the ref on the counter element instead of its wrapper.