title: ReactJS HOC dudes (HIgh order component)
body: <p>create a higher order component to be able to perform a loader.
  I explain myself, I have a component that performs a get to a JSON api, but I want that while I load and the cards do not appear, this is a message that says Loading ...</p>
  
  <p>I already have this validation within the card component, but I want it to be dynamic and to be able to repeat this logic in user cards too</p>
  
  <p><strong>Attached component code and its validation</strong> </p>
  
  <pre><code>import React, { Component } from 'react';
  import Axios from 'axios';
  import Cards from '../Molecules/Cards';
  import whithLoader from "../HOC/whitLoeader"
  
  class Axios_cards extends Component {
  
      constructor(props) {
  
          super(props)
          this.state = {
              courses : []
          }      
      }
  //                              FIX ME
  
      componentDidMount() {
          Axios.get('https://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
          .then(response =&gt; this.setState({
                  courses: response.data
  
          }))
      }
      render() {
  
          const { courses } = this.state
          return (
              &lt;&gt;
  
              &lt;div className="ed-grid m-grid-3"&gt;
  
              {courses.length===0 ?
                  &lt;h1&gt;Cargando...&lt;/h1&gt; :
                  courses.map(u =&gt;        //Validation for Loading message
                                  &lt;Cards
                                  key={u.id}
                                  title={u.title}
                                  description={u.description}
                                  image={u.image}
                                  email={u.email}
                                  price={u.price}
                                  /&gt;)
  
              }
              &lt;/div&gt;
              &lt;/&gt;
          )
      }
  }
  
  export default whithLoader(Axios_cards);
  
  </code></pre>
  
  <p><strong>High order component:</strong></p>
  
  <pre><code>import React, { Component } from 'react'; //Se tiene que importar React
  
  const withLoader = (WrappedComponent) =&gt; { //Esto se tiene que crear de esta maneraa
      return class whithLoader extends Component{
          constructor(props) { //Se tiene que crear un metodo constructor que reciba las props
              super(props)
          }
          render() {
              console.log(this.props);
              return &lt;WrappedComponent {...this.props} /&gt;
          }
      }
  }
  export default withLoader;
  
  </code></pre>
  
  <p>That is why I need to be able to access the variable "courses" within CardsGrid. To be able to place the logic of the message loading inside the HOC</p>
  
  <p>I try this : </p>
  
  <pre><code>const withLoader = (WrappedComponent) =&gt; { //Esto se tiene que crear de esta maneraa
      return class whithLoader extends Component{
          constructor(props) { //Se tiene que crear un metodo constructor que reciba las props
              super(props)
          }
          render() { 
              //I want to get the length of the array, so that when it is being requested and 0 is 
             //displayed Loading ...
              return this.props.courses.length === 0 ? &lt;h1&gt;Loading...&lt;/h1&gt; : &lt;WrappedComponent {...this.props} /&gt;
          }
      }
  }
  </code></pre>
  
  <p>but ... : message error</p>
  
  <pre><code>TypeError: Cannot read property 'length' of undefined
  whithLoader.render
  src/Components/HOC/whitLoeader.js:10
     7 |         }
     8 |         render() {
     9 |             
  &gt; 10 |             return this.props.courses.length === 0 ? &lt;h1&gt;Loading...&lt;/h1&gt; : &lt;WrappedComponent {...this.props} /&gt;
    11 |         }
    12 |     }
    13 | }
  </code></pre>