title: Using a HOC (higher order component) with React-Redux connect
body: <p>I'm trying to get more comfortable with using higher order components so I'm working on refactoring an application. I have four different components that all reuse the same <code>fetchData</code> request, as well as error/loading conditionals. My plan is to take this reusable data and put it into a HOC. I've tried many different examples from StackOverflow, Reddit, Github, etc and none of them are working in my specific case.</p>
  
  <p>Here's my HOC:</p>
  
  <pre><code>const WithDataRendering = WrappedComponent =&gt; props =&gt; {
  class WithDataRenderingComponent extends Component {
      componentDidMount() {
      this.props.fetchData(url)
      }
      render() {
      if (this.props.hasErrored) {
          return (
          &lt;p&gt;
              Sorry! There was an error loading the items:{" "}
              {this.props.hasErrored.message}
          &lt;/p&gt;
          )
      }
  
      if (this.props.isLoading) {
          return (
          &lt;div&gt;
              &lt;Skeleton count={10} /&gt;
          &lt;/div&gt;
          )
      }
  
      return &lt;WrappedComponent {...this.props} /&gt;
      }
  }
  const mapStateToProps = state =&gt; {
      return {
      data: state.data,
      hasErrored: state.dataHasErrored,
      isLoading: state.dataIsLoading
      }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
      fetchData: url =&gt; dispatch(fetchData(url))
      }
  }
  return connect(mapStateToProps, mapDispatchToProps)(
      WithDataRenderingComponent
  )
  }
  
  export default WithDataRendering
  </code></pre>
  
  <p>And here's a component that I'm trying to wrap with the HOC:</p>
  
  <pre><code>export class AllData extends Component&lt;Props&gt; {
      render() {
          return (
          ...
          )
      }
  }
  
  const mapStateToProps = state =&gt; {
      return {
          data: state.data,
          hasErrored: state.dataHasErrored,
          isLoading: state.dataIsLoading
      }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          fetchData: url =&gt; dispatch(fetchData(url))
      }
  }
  
  export default compose(
      connect(mapStateToProps, mapDispatchToProps),
      WithDataRendering(AllData)
  )
  </code></pre>
  
  <p>I get three errors in the console:</p>
  
  <p><code>Warning: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.</code></p>
  
  <p><code>invariant.js:42 Uncaught Error: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.</code></p>
  
  <p><code>ReactDOMComponentTree.js:111 Uncaught TypeError: Cannot read property '__reactInternalInstance$24sdkzrlvvz' of null</code></p>
  
  <p>A couple other techniques I tried are in this <a href="https://stackoverflow.com/questions/40866308/react-redux-use-hoc-with-connected-component">SO post</a> and this <a href="https://gist.github.com/robinmonjo/2790fb319351843349cfec43213f4898" rel="nofollow noreferrer">gist</a>. I've tried using <code>compose</code> and not using it, doesn't matter. I'm really at a loss here. Any ideas why this HOC isn't rendering properly?</p>
  
  <p>Also, I'm not opposed to using <code>render props</code> as a solution if that fits better. I need to get more practice with both methods.</p>