Short answer
Read the expression in brackets. In user.profile.name, the error means the part before the last dot (user.profile) was undefined. Find where that value comes from: usually data that has not loaded yet, an API response with a different shape, or an empty result from find() or an array index. Guard it with optional chaining (user.profile?.name) or a check, and render a loading state until the data arrives.
Why the value is missing, and the fix
01
Data that has not loaded yet
“You cannot invoke a method on an undefined or null variable.” MDN, TypeError: "x" is (not) "y"
The first render runs before the fetch finishes, so the state is still undefined or null. Start from a value the code can read, and show a loading state until the real data arrives.
const [user, setUser] = useState(null); if (!user) return <Spinner />; return <p>{user.profile?.name}</p>;02
The API returned a different shape
“To fix null pointer to undefined or null values, you can test if the value is undefined or null first.” MDN, TypeError: "x" is (not) "y"
The code expects data.items, but the response is an error object, an empty body, or wraps the list in another key. Log the real response once, then read only what is there.
const items = data?.items ?? [];03
An empty result from find() or an index
find() returns undefined when nothing matches, and list[0] is undefined when the list is empty. Check the result before reading from it.
const plan = plans.find((p) => p.id === id); if (!plan) return null;04
It only fails on iPhone or in React Native
“Hermes is used by default by React Native and no additional configuration is required to enable it.” React Native, Using Hermes
The wording comes from JavaScriptCore, the engine in Safari and, in practice, in Chrome and other browsers on iPhone, and in React Native apps that opted out of Hermes. The cause is the same as in Chrome; the bug often shows up only there because of timing or a missing browser feature. Reproduce it in Safari with the Web Inspector open, or on the device.
Checked against the vendor’s docs on : MDN: TypeError: "x" is (not) "y"; React Native docs: Using Hermes.
Rather hand it over?
Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.
- from $450App Fix TicketOne reproducible bug in an existing mobile or web app, diagnosed and fixed.See scope and start
- from $450AI-Built App RescueA Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.See scope and start
Related: “Cannot read properties of undefined” · “Cannot convert undefined or null to object” · JavaScript “x is not a function”