Uncaught TypeError: Cannot read property of null

Hello guys! 👋, today i will discussing about error handling in JavaScript. You see this type of error everyday while coding and sometime it's very frustrating to identify this errors in code base.

I break it down in a simpler steps and detect why it shows null for a value or object we are trying to access. There is various reasons & solutions for this type of errors.

Uncaught TypeError: Cannot read property "id" of null

You are accessing a property of an object that is null. For example, document.getElementById('stuff') returns null. So adding .id will cause the error. If you are using React then it is most common error while we use onChange functions for handling dynamic behavior of a component.

You are trying to access a DOM element before the DOM is ready. Use onload or DOMContentLoaded. Test if an object is valid before accessing its property. There are a few variations of this error depending on the property you are trying to access. Sometimes instead of null it will say undefined. An example will be:

Uncaught TypeError: Cannot read property 'id' of null

Uncaught TypeError: Cannot read property 'innerHTML' of null

All this means is that you are trying to access a property of an object that is undefined or null. These usually happens when we don't test an object before using it. Here is a common scenario. I face this error while using AutoComplete component of the Material UI when clearing selection of dropdown.

// We want to get the value of an input. 
var selectId = document.getElementById("input").id;

// or in React Material Ui AutoComplete component we are trying to get an ID of selected item 
// newValue is an object with properties like id, label, value etc.
setCurrentFolder(event, newValue) {
        this.currentFolder = newValue.id  // when clear selection it shows newValue.id is null
        this.setState({ currentFolder: this.currentFolder, folderId: this.currentFolder });
    }

This will result in Uncaught TypeError: Cannot read property 'id' of null. The reason will be that the element with id input does not exist. Let me break it down in simpler steps;

var input = document.getElementById("input"); 
// when this fails, it returns null. input = null
var selectId = input.id;
// this is the same as the following. 
var selectId = null.id;
// null does not have the property 'id'

When you break it down, the error actually makes sense. To make sure that you don't get this error, you have to make sure that button, or any object you use, is not null before you use it. For our example:

var input = document.getElementById("btn");
var selectId = "";
if (input) {
    selectId = input.id;
}

// or in React add error check like this for onChange() functions: 
setCurrentFolder(event, newValue) {
// here we check if newValue is not null then proceed, this doesn't show any error.
        if (newValue !== null){ 
             this.currentFolder = newValue.id
        }
        this.setState({ currentFolder: this.currentFolder, folderId: this.currentFolder });
    }

Sometimes, your object is nested deeper like Tree.folder.path. You just have to make sure that if you need to access folder, than Tree has to be defined. And if you need to access path, then folder needs to be defined.

In some cases, this error is a symptom of another issue. Why would getElementById return null if the element actually exists on the page? Probably because the function is called before the DOM is ready. Always be careful when accessing a DOM element before it is ready.

If you like this article or you want to share some information here then let me know in comments or follow me on Twitter.