title: How to access prop outside of class while calling higher order component such that Higher order component will be reusable
body: <p>I have created higher order component to render loader, if data is not available. component named as <strong>Loader</strong> is higher order component. and component named as <strong>ContactList</strong> calls the Higher order component.
  My code for ContactList component: </p>
  
  <pre><code>import React, { Component } from 'react';
  import '../App.css';
  import Loader from './hoc/Loader.js';
  
  class ContactList extends Component {
    constructor(props) {
      super(props);
      this.state = {
      }
    }
  
   render() {
     return (
       &lt;div className="App"&gt;
         {
          this.props.contacts.map((contact, index) =&gt; (
            &lt;div key={index}&gt;
              &lt;p&gt;{contact.name}&lt;/p&gt;
            &lt;/div&gt;
          ))
        }
      &lt;/div&gt;
     );
    }
  }
  
  export default Loader(this.props.contacts)(ContactList);
  </code></pre>
  
  <p>code for Loader(HOC) component - </p>
  
  <pre><code>import React, { Component } from 'react';
  import './Loader.css';
  
  const Loader = (propName) =&gt; (WrappedComponent) =&gt; {
      return class Loader extends Component {
          isEmpty(prop) {
              return (
                  prop === null ||
                  prop === undefined ||
                  (prop.hasOwnProperty('length') &amp;&amp; prop.length === 0) ||
                  (prop.constructor === Object.keys(prop).length === 0)
              );
          }
          render() {
              return this.isEmpty(propName) ? &lt;div className="loader"&gt;&lt;/div&gt; : &lt;WrappedComponent {...this.props}/&gt;
          }
      }
  }
  
  export default Loader;
  </code></pre>
  
  <p>But i am getting this error </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'contacts' of undefined
    as props are not accessible outside of class.</p>
  </blockquote>
  
  <p>I have tried many solutions - </p>
  
  <p>1) <a href="https://stackoverflow.com/questions/39886189/access-prop-outside-of-class-in-react-when-calling-higher-order-component">one of tried solution</a></p>
  
  <p>2) If I change my export statement to <code>export default Loader(ContactList)</code>, then this works fine but the loader component is no more reusable</p>