CODEWITHSUNDEEP
javascriptreactjs
Sander Vispoel
Sander Vispoel

Reputation: 161

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

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.

Upvotes: 6

Views: 5626

Answers (2)

Sagiv b.g
Sagiv b.g

Reputation: 31024

You should use a jsx tag in your render function: 

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

Upvotes: 7

putvande
putvande

Reputation: 15213

This is because in the root, where you render App, you pass App as a function: render(App, document.getElementById('root'));.
Instead you need to pass it as a component (just like the error says): render(<App/>, document.getElementById('root'));

https://codesandbox.io/s/y077k1qy7j

Upvotes: 3

Related Questions