How to Get Rid of “Cannot Read Property of Undefined” in a React App

It usually happens when data hasn’t arrived yet.

You expect something like user.profile.name, but the API is slow, the response is partial, or a field is missing. The moment JavaScript tries to read a property that doesn’t exist, your app crashes. this is one of the most common mistakes junior developers run into, especially when working with backend data.

Why this happens?

JavaScript does not forgive undefined access.

If user exists but profile doesn’t, this line will throw an error:

user.profile.name

Old way:

const user = {}; // Empty object

let street;
if (user && user.address && user.address.street) {
  street = user.address.street;
}

console.log(street); // undefined

This works, but it’s noisy, repetitive, and easy to get wrong. As the object gets deeper, the condition becomes harder to read and harder to maintain.

Get DevManus’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Modern Way:

Optional chaining (?.) was added to solve exactly this problem.

It tells JavaScript that try to access this property. If it doesn’t exist, stop and return undefined instead of throwing an error.

const user = {}; // Empty object

const street = user?.address?.street;

console.log(street); // undefined (no crash)

If user is undefined, it stops.
If address is missing, it stops.

Once you start using it, your code becomes easier to read, easier to maintain, and far more resistant to real-world data issues. For anyone working with backend responses, this is one of the most valuable JavaScript features you can learn early.