Lire un message d'erreur

TypeError: Cannot read properties of undefined (reading 'name')
    at UserCard (components/UserCard.tsx:12:24)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)

# Decomposition :
# 1. TYPE D'ERREUR  -> TypeError (le type de l'objet n'est pas bon)
# 2. MESSAGE        -> Cannot read properties of undefined (reading 'name')
#                      = tu essaies de lire .name sur quelque chose qui est undefined
# 3. FICHIER + LIGNE -> UserCard.tsx:12:24
#                      = fichier UserCard.tsx, ligne 12, colonne 24
# 4. STACK TRACE     -> la chaine d'appels qui a mene a l'erreur

// UserCard.tsx
interface UserCardProps {
  user: { name: string; email: string }
}

export function UserCard({ user }: UserCardProps) {
  // Ligne 12 : si user est undefined, user.name plante
  return (
    <div>
      <h2>{user.name}</h2>  {/* <- BOUM ! TypeError si user est undefined */}
      <p>{user.email}</p>
    </div>
  )
}

// Le fix : verifier que user existe
export function UserCardFixed({ user }: UserCardProps) {
  if (!user) return <p>Chargement...</p>

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  )
}