"Cannot read property of undefined."
Three causes, three fixes.

import { useState, useEffect } from 'react';

interface User {
id: string;
name: string;
email: string;
address: { city: string; zip: string };
}

// ─── BAD: crash on first render ──────────────
function BadProfile({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);

useEffect(() => {
fetch(/api/users/${userId}`)
.then(r => r.json())
.then(setUser);
}, [userId]);

// ❌ Crashes on first render: user is null, user.address throws
return 
{user.name} — {user.address.city}
;
}

// ─── GOOD 1: optional chaining ───────────────
function GoodProfile1({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);

useEffect(() => {
fetch(/api/users/${userId}`)
.then(r => r.json())
.then(setUser);
}, [userId]);

// ✅ Short-circuit — renders "Loading..." until data arrives
return (

{user?.name ?? 'Loading...'} — {user?.address?.city ?? '—'}

);
}

// ─── GOOD 2: early return (recommended) ──────
function GoodProfile2({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);

useEffect(() => {
fetch(/api/users/${userId}`)
.then(r => r.json())
.then(setUser);
}, [userId]);

// ✅ Early return — no null checks in the rest of the component
if (!user) {
return 
Loading...
;
}

// user is User here — full access without ?
return (

{user.name}
{user.email}
{user.address.city}, {user.address.zip}

);
}

// ─── GOOD 3: three-state discriminated union ──
type LoadState =
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; error: Error };

function BestProfile({ userId }: { userId: string }) {
const [state, setState] = useState>({ status: 'loading' });

useEffect(() => {
setState({ status: 'loading' });
fetch(/api/users/${userId}`)
.then(r => r.json())
.then(data => setState({ status: 'success', data }))
.catch(error => setState({ status: 'error', error }));
}, [userId]);

if (state.status === 'loading') return 
Loading...
;
if (state.status === 'error') return 
Error: {state.error.message}
;

// state.data is User — fully typed and non-null
return 
{state.data.name} — {state.data.address.city}
;
}

console.log(BadProfile, GoodProfile1, GoodProfile2, BestProfile);

import { useState } from 'react';

interface User { id: string; name: string }

// ─── BAD: assumes prop exists ────────────────
function BadUserList({ users }: { users?: User[] }) {
// ❌ If parent doesn't pass users, this crashes:
// Cannot read property 'map' of undefined
return 
{users.map(u => 
{u.name}
)}
;
}

// ─── GOOD 1: default the prop ────────────────
function GoodUserList({ users = [] }: { users?: User[] }) {
// ✅ Default value — users is always an array
return 
{users.map(u => 
{u.name}
)}
;
}

// ─── GOOD 2: require the prop ────────────────
interface RequiredProps {
users: User[]; // not optional — parent must pass it
}

function RequiredUserList({ users }: RequiredProps) {
// ✅ The compiler ensures parent passes users
return 
{users.map(u => 
{u.name}
)}
;
}

// ─── GOOD 3: guard the render ────────────────
function GuardedUserList({ users }: { users?: User[] }) {
if (!users) {
return 
No users
;
}
// users is User[] here
return 
{users.map(u => 
{u.name}
)}
;
}

// ─── GOOD 4: default + destructure in map ────
interface CardProps {
title: string;
items?: { id: string; text: string }[];
}

function Card({ title, items = [] }: CardProps) {
return (

{title}
{items.length === 0 ? (
No items
) : (

{items.map(item => 
{item.text}
)}

)}

);
}

// ─── Parent call sites ───────────────────────
function App() {
const [users] = useState([
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Bob' }
]);

return (

{/* ❌ BadUserList: forgot users prop → crash */}


{/* ✅ GoodUserList: default [] prevents crash */}



{/* ✅ RequiredUserList: TS forces the prop /}
{/  — compile error */}


{/* ✅ GuardedUserList: shows "No users" */}



);
}

console.log(BadUserList, GoodUserList, RequiredUserList, GuardedUserList, Card, App);

import { useEffect, useState } from 'react';

interface User {
id: string;
name: string;
email: string;
}

// ─── Type guard for the API boundary ─────────
function isUser(x: unknown): x is User {
return (
typeof x === 'object' &&
x !== null &&
'id' in x &&
'name' in x &&
'email' in x &&
typeof (x as User).id === 'string' &&
typeof (x as User).name === 'string' &&
typeof (x as User).email === 'string'
);
}

// ─── BAD: cast without validation ────────────
function BadProfile({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);

useEffect(() => {
fetch(/api/users/${userId}`)
.then(r => r.json())
.then((data) => setUser(data as User)); // ❌ trusts the shape
}, [userId]);

// If server returns { error: 'Not found' }:
// user is typed User but is actually { error: ... }
// user.name → undefined, user.email → undefined
// No crash here (undefined is safe), but downstream code that does
// user.address.city will crash.

return 
{user?.name ?? 'Loading...'}
;
}

// ─── GOOD: validate at the boundary ──────────
function GoodProfile({ userId }: { userId: string }) {
const [user, setUser] = useStatenull>(null);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
fetch(/api/users/${userId}`)
.then(r => r.json())
.then((data: unknown) => {
if (!isUser(data)) {
setError('Invalid response');
return;
}
setUser(data); // ✅ User — validated
})
.catch(e => setError(e.message));
}, [userId]);

if (error) return 
Error: {error}
;
if (!user) return 
Loading...
;

return 
{user.name} — {user.email}
;
}

// ─── The rule ────────────────────────────────
//
// API data is unknown until validated.
// as User is a lie — it compiles but doesn't check.
// isUser(data) actually verifies the shape.
//
// Validate once at the boundary, then trust the type.
// Downstream components don't need null checks —
// they receive a proper User | null from a parent
// that already handled the null case.

console.log(BadProfile, GoodProfile, isUser);