"Cannot Read Properties of Undefined" in React

You're looking at your browser console and seeing this:

TypeError: Cannot read properties of undefined (reading 'name')

Or maybe it says 'map', 'length', 'id', or 'email' instead of 'name'. The specific property doesn't matter. The problem is the same: your code tried to access a property on something that doesn't exist yet.

What this error actually means

In plain English: your code said something.name, but something is undefined. It's like trying to open the glove compartment of a car that isn't there. JavaScript can't read .name on nothing.

This happens constantly in React because React renders your component before your data arrives. Here's the typical sequence:

1. Component mounts and starts rendering
2. Your code tries to display user.name
3. But the API call to fetch user hasn't finished yet
4. user is undefined
5. Crash

This is the number one crash in AI-generated React apps because AI writes code that assumes data is always available. It generates a component that displays user.profile.avatar without considering that user might not exist yet, or that profile might be null.

How to find the problem

The error message tells you exactly where to look. It has two pieces of information:

• The property it tried to read — (reading 'name')
• The file and line number — shown in the stack trace below the error

Go to that line. You'll find something like user.name or data.items.map(...). The variable before the dot — user or data.items — is the one that's undefined.

Now ask: where does that variable come from? Usually it's one of these:

• A useState hook with no initial value: const [user, setUser] = useState()
• A prop that wasn't passed: function Profile({ user }) called without user
• An API response that hasn't arrived yet
• An API response that has a different shape than expected
• A nested property where any level could be null: response.data.user.profile.name

How to fix it

Fix 1: Add a loading state. If the data comes from an API, your component needs to handle the time before the data arrives.

const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
    fetchUser().then(data => {
        setUser(data);
        setLoading(false);
    });
}, []);

if (loading) return <div>Loading...</div>;
if (!user) return <div>User not found</div>;

return <div>{user.name}</div>;

Fix 2: Use optional chaining. The ?. operator stops the chain if anything is null or undefined, returning undefined instead of crashing.

// Instead of this (crashes if user is undefined):
{user.profile.name}

// Do this (returns undefined, no crash):
{user?.profile?.name}

Fix 3: Provide default values. Give your state a sensible default so it's never undefined.

// Instead of:
const [items, setItems] = useState();

// Do:
const [items, setItems] = useState([]);

// Now items.map() won't crash because [] is a valid array

Fix 4: Check before rendering. For conditional data, check that it exists before trying to use it.

{user && <div>{user.name}</div>}

// Or for arrays:
{items && items.length > 0 && items.map(item => ...)}

Why AI keeps causing this

AI code generators write the "happy path" — the version where everything works, all data is available, and nothing is null. Real apps aren't like that. Data arrives asynchronously. APIs return unexpected shapes. Users navigate to pages before data loads. Props get passed as undefined.

When you tell AI to "build a user profile page," it generates code that beautifully displays a user profile. It doesn't generate code that handles the 500 milliseconds before the user data arrives, or the case where the API returns an error, or the case where the user doesn't have a profile picture.

Every time you see this error in AI-generated code, the fix is the same: figure out what's undefined, figure out when it becomes defined, and handle the gap.

The deeper problem

If you're seeing this error frequently, it's a sign that your app doesn't have a consistent pattern for data loading. In a well-structured React app, there's a standard way to handle loading states, error states, and missing data. AI tends to handle these differently in every component, creating a codebase where you're fixing the same category of bug in thirty different ways.

A developer would establish a pattern once — a custom hook, a wrapper component, or a data-fetching library like React Query — and apply it everywhere. That's the difference between fixing this bug once and fixing it forever.