TypeError: Cannot read properties of undefined (reading 'x')
You tried to access a property on a value that is undefined (or null) — usually data that hasn’t loaded yet or a wrong property path.
Cannot read properties of undefinedCannot read property of undefinedCannot read properties of nullundefined is not an objectCannot read property 'map' of undefined Meaning
JavaScript throws this when the left side of . or [] is undefined or null. The name in parentheses is the property you tried to read, not the variable that was undefined. In user.profile.name, “reading 'name'” means user.profile was undefined.
Older browsers phrase it as “Cannot read property 'x' of undefined” and Safari as “undefined is not an object (evaluating …)”.
Common causes
- Async data not loaded yet (rendering before fetch completes)
- Wrong property name or path (typo, different API shape)
- Array index out of range (
items[5]when there are 3 items) - Function returns nothing (missing
return) - DOM element not found —
document.querySelector()returned null - Destructuring from undefined (
const { a } = props.data)
⚡ Quick fix
- Find the exact line from the stack trace and log the object just before it
- Use optional chaining:
user?.profile?.name - Provide defaults:
const items = data?.items ?? [] - Render a loading state until async data exists
- Run DOM code after the element exists (
defer,DOMContentLoaded)
Detailed fix by platform
JavaScript
- Guard the access:javascript
// ❌ crashes when data or data.items is undefined const names = data.items.map(i => i.name); // ✅ const names = (data?.items ?? []).map(i => i.name);
React
- Handle the loading state:jsx
const [users, setUsers] = useState([]); // start with an empty array, not undefined useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers); }, []); if (!users.length) return <p>Loading…</p>; return users.map(u => <li key={u.id}>{u.name}</li>);
Node.js
- Check API responses before use:
if (!res.data?.user) throw new Error('User missing in response')gives a clearer error at the source.
Code examples
Read the stack trace
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at UserList (UserList.jsx:14:23)Line 14, column 23 of UserList.jsx: whatever is before .map is undefined.
How to diagnose
- Stack trace — Which file:line, and which property is being read?
- Object — Log the value left of the dot — undefined or null?
- Source — Where should it come from — API, props, state, DOM?
- Timing — Is it accessed before it’s ready?
🔧 Still not fixed?
Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:
Similar errors
Most viewed in JavaScript
- Failed to fetch TypeError: Failed to fetch / NetworkError when attempting to fetch resource
- module MIME type Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
- QuotaExceededError QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value exceeded the quota
Other ways to find it
Where this error sits
Origin: On your device. Errors that are often confused with or caused by this one (click to open):
🧠 Still stuck? Analyze your error
Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.
💬 What worked for others
No tips yet — did something else fix this for you?
Share what worked for you
Tips are checked by an editor before they appear. Links are removed.
Report a correction or suggest an improvement
Last updated 15 Oct 2026