[Solved]: document.getElementById() returns NULL in React

avatar

Borislav Hadzhiev

Last updated: Apr 28, 2022

banner

Photo from Unsplash

[Solved]: document.getElementById() returns NULL in React #

The document.getElementById() method returns null in React when we call the method before the element with the provided ID has been rendered to the DOM or if an element with the ID doesn't exist. To get around this, call the getElementById() method in the useEffect hook.

App.js
import {useEffect} from 'react'; export default function App() { useEffect(() => { // 👇️ call method in useEffect hook const el = document.getElementById('container'); console.log(el); }, []); return ( <div> <div id="container"> <h2>Hello world</h2> </div> </div> ); }

The 2 most common reaons for the document.getElementById method to return null in React are:

  1. We are trying to select an element that hasn't been rendered to the DOM yet.
  2. We are providing an ID that doesn't exist in the DOM.

You can use the document.getElementById method in the useEffect hook because the hook runs after the component has been mounted.

App.js
useEffect(() => { // 👇️ call method in useEffect hook const el = document.getElementById('container'); console.log(el); }, []);

We passed an empty dependencies array to the useEffect hook, so it's only going to run on the initial render.

We had to use the useEffect hook because we need to wait for the div element to get rendered before calling document.getElementById().

You can also call the document.getElementById() method in an event handler function, e.g. in an onClick handler, because the element will be present in the DOM when the event is triggered.

Note that if you have access to the DOM element in your component, you can use a ref.

App.js
import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(null); useEffect(() => { const el2 = ref.current; console.log(el2); }, []); return ( <div> <div ref={ref}> <h2>Hello</h2> </div> </div> ); }

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the div element on which we set the ref prop.

When we pass a ref prop to an element, e.g. <div ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

We used the useEffect hook because we want to make sure the ref has been set on the element and the element has been rendered to the DOM.

Using refs should be your preferred approach when you have access to the element in your component, otherwise you can use the document.getElementById method.

Conclusion #

The document.getElementById() method returns null in React when we call the method before the element with the provided ID has been rendered to the DOM or if an element with the ID doesn't exist. To get around this, call the getElementById() method in the useEffect hook.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.