Objects Are Not Valid as a React Child : Solution

Tu vois cette erreur dans la console : "Objects are not valid as a React child". Ton composant refuse de s'afficher. C'est parce que tu essaies de rendre un objet JavaScript directement dans le JSX — et React ne sait pas comment afficher un objet brut. Voici les 5 causes et les solutions.

Pourquoi React refuse les objets

React peut afficher dans le JSX :

• Strings : {'Bonjour'}
• Numbers : {42}
• Éléments React : {}
• Tableaux : {[1, 2, 3]} (rendu élément par élément)
• null / undefined / boolean : ignorés (rien affiché)

Ce qu'il ne peut PAS afficher : un objet {}. Un objet n'a pas de représentation textuelle évidente — React ne devine pas si tu veux afficher une propriété, du JSON, ou autre chose.

Cause 1 : Afficher un objet au lieu d'une propriété

const user = { name: 'Ali', age: 25 };

// ❌ Afficher l'objet entier
return 
{user}
; // Error: Objects are not valid as a React child

// ✅ Afficher une propriété (string ou number)
return 
{user.name}
; // 'Ali'

// ✅ Ou convertir en JSON pour du debug
return 
{JSON.stringify(user, null, 2)}
;

C'est la cause n°1 — surtout quand on débute avec les données d'API.

Cause 2 : Afficher un objet Date

const createdAt = new Date();

// ❌ Date est un objet
return 
Créé le {createdAt}
; // Error!

// ✅ Convertir en string
return 
Créé le {createdAt.toLocaleDateString('fr-FR')}
;
// 'Créé le 10/04/2026'

// ✅ Ou avec toISOString()
return 
{createdAt.toISOString()}
;

Cause 3 : Données d'API avec un objet nested

// L'API retourne : { user: { name: 'Ali', address: { city: 'Paris' } } }
const [data, setData] = useState(null);

// ❌ Afficher l'objet address
return 
Ville : {data?.address}
; // Error si address est un objet

// ✅ Accéder à la propriété string
return 
Ville : {data?.address?.city}
; // 'Paris'

// ❌ Piège courant avec .map()
return (
  

    {users.map(user => (
      
{user}
  // ❌ user est un objet !
    ))}
  
);

// ✅ Afficher la propriété
return (
  

    {users.map(user => (
      
{user.name}
  // ✅
    ))}
  
);

Cause 4 : State initialisé avec un objet au lieu d'une valeur

// ❌ Le state contient un objet
const [status, setStatus] = useState({ loading: true, error: null });
return 
Status : {status}
; // Error!

// ✅ Afficher une propriété du state
return 
Status : {status.loading ? 'Chargement...' : 'Prêt'}
;

// ✅ Ou utiliser des states séparés
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
return 
{loading ? 'Chargement...' : 'Prêt'}
;

Cause 5 : Composant qui retourne un objet au lieu de JSX

// ❌ Retourner un objet au lieu de JSX
function UserCard({ user }) {
  return { name: user.name }; // Un objet, pas du JSX !
}

// ✅ Retourner du JSX
function UserCard({ user }) {
  return 
{user.name}
;
}

// ❌ Piège des accolades dans une arrow function
const UserCard = ({ user }) => { 
{user.name}
 };
// Les {} créent un bloc de code, pas un objet JSX — return manquant

// ✅ Parenthèses pour un return implicite
const UserCard = ({ user }) => (
{user.name}
);

// ✅ Ou return explicite
const UserCard = ({ user }) => {
  return 
{user.name}
;
};

Technique de debug

// Quand tu ne sais pas ce que contient une variable :
console.log('Type:', typeof maVariable);
console.log('Value:', maVariable);

// Si c'est un objet, affiche-le en JSON
return 
{JSON.stringify(maVariable, null, 2)}
;
// Tu verras la structure exacte et pourras accéder aux bonnes propriétés

Résumé

FAQ

Comment afficher un objet entier en React pour debugger ?
Utilise <pre>{JSON.stringify(objet, null, 2)}</pre>. Ça affiche l'objet formaté en JSON directement dans la page. Parfait pour le debug.

Pourquoi React peut afficher un tableau mais pas un objet ?
React sait itérer sur un tableau et afficher chaque élément. Un objet n'a pas d'ordre défini et React ne peut pas deviner comment l'afficher (les clés ? les valeurs ? les deux ?).

Cette erreur peut apparaître avec TypeScript ?
TypeScript détecte cette erreur à la compilation si le type est bien défini. C'est un des avantages de TypeScript avec React : tu vois l'erreur dans l'éditeur avant même de lancer l'app.

Pour éviter les erreurs React courantes : les 15 erreurs React à éviter et les 23 questions React des débutants.

Envie de pratiquer ? GoGoKodo propose des ateliers interactifs pour apprendre React en codant directement dans le navigateur — 100% gratuit.