Erreur items.length undefined dans Header.jsx React

Question

Bonsoir Nicolas ,
En suivant ton code au niveau du Header.jsx quand je met items.lenght : je reçois une grosse erreur la voici :
Unexpected Application Error!
Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')
at Header (http://localhost:5173/src/components/Header/Header.jsx?t=1756227212849:152:178)
at renderWithHooks (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:12169:26)
at updateFunctionComponent (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:14575:28)
at beginWork (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:15910:22)
at beginWork$1 (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:19747:22)
at performUnitOfWork (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:19192:20)
at workLoopSync (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:19131:13)
at renderRootSync (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:19110:15)
at recoverFromConcurrentError (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:18730:28)
at performSyncWorkOnRoot (http://localhost:5173/node_modules/.vite/deps/chunk-MCEUSTYS.js?v=93e910b4:18873:28)
Je ne comprends pas pourquoi ??
Vous pouvez m'expliquez svp .
Merci

Demetrius Le Grand Bangake · Accepted Answer

Bonjour, J’ai également rencontré le même problème. Dans mon composant App , j’avais écrit : En réalité, j’avais mis une double accolade, ce qui signifie que je passais un objet contenant une propriété contexValue . Autrement dit, la valeur transmise au contexte ressemblait à ceci : { contexValue: { items: [], addItem: f() } } C’est pour cette raison que j’obtenais l’erreur « Impossible de lire les propriétés de undefined (lecture de 'length') ». Il suffit de retirer les doubles accolades et d’écrire :

Louis-Nicolas Leuillet · Answer

Hello !
Ce n'est pas items.lenght mais items.length ;)
Quoi qu'il en soit, je ne pense pas que ce soit de là que vienne ton erreur car il semble que c'est une faute de frappe dans cette discussion d'après ton erreur.
Apparemment ici ton items n'est pas défini. Tu es sûr que cette variable est présente ?

Damien Holken · Answer

Je participe au cas où, ayant eu la même erreur, j'ai repris de la session précédente pour être sûr. Le problème venait du fait que items , au moment d'enlever sa valeur [] (tableau vide) dans le contextValue , devenait undefined . De mon côté et du côté de ceux ayant eu cette erreur, je pense que cela vient simplement du fait de ne pas mettre un tableau vide dans le useState qui vient d'être créé. Je viens d'y passer 15 minutes pour me rendre compte de ce simple oubli. Soyez très attentifs à ces détails vous aussi...

Erreur items.length undefined dans Header.jsx React

Formation Apprendre React 19 en 2026