ReactJS HOC DUDES (composant d'ordre élevé)

Créer un composant d'ordre supérieur pour pouvoir effectuer un chargeur. Je m'explique moi-même, j'ai un composant qui accomplit une API JSON, mais je le souhaite pendant que je charge et que les cartes n'apparaissent pas, c'est un message qui dit que le chargement ...

J'ai déjà cette validation dans Le composant de la carte, mais je veux que ce soit dynamique et de pouvoir répéter cette logique dans les cartes d'utilisateur aussi p>

Code de composant ci-joint et sa validation forte> P>

TypeError: Cannot read property 'length' of undefined
whithLoader.render
src/Components/HOC/whitLoeader.js:10
   7 |         }
   8 |         render() {
   9 |             
> 10 |             return this.props.courses.length === 0 ? <h1>Loading...</h1> : <WrappedComponent {...this.props} />
  11 |         }
  12 |     }
  13 | }