Cannot Read Properties of Undefined Error

Use ?. to safely access nested properties without crashing.

const user = null

// ❌ TypeError: Cannot read properties of null
console.log(user.name)

// ✅ Safe access
console.log(user?.name) // undefined, no error
console.log(user?.address?.city) // undefined, no error

// In JSX
return <p>{user?.name ?? "Guest"}</p>

Provide fallback values when data is undefined.

function UserProfile({ user }) {
  // Provide defaults for undefined values
  const name = user?.name ?? "Anonymous"
  const email = user?.email ?? "No email"
  const items = user?.items ?? []
  
  return (
    <div>
      <p>{name}</p>
      <p>{email}</p>
      {items.map(item => (
        <span key={item.id}>{item.name}</span>
      ))}
    </div>
  )
}

Conditionally render content only after data has loaded.

function UserList() {
  const [users, setUsers] = useState(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(data => {
        setUsers(data)
        setLoading(false)
      })
  }, [])
  
  if (loading) return <p>Loading...</p>
  if (!users) return <p>No users found</p>
  
  return users.map(user => <div key={user.id}>{user.name}</div>)
}