Error when trying to use function that returns a function that returns a HOC (a la Redux Connect)

Question

I'm trying to create a Higher Order Component (HOC) that is like connect from react-redux but I'm running into errors.

My code can be found here: https://codesandbox.io/s/483or78no0

I took this HOC code from this blog post: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e (look for Appendix A: HOC and parameters)

The error I get is: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. and nothing is rendered.

Answer 1

You should use a jsx tag in your render function:

render(<App/>, document.getElementById('root'));