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.
The connect() function connects a React component to a Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.
They are the pattern that emerges from React's compositional nature. The component transforms props into UI, and a higher-order component converts a component into another component. The examples of HOCs are Redux's connect and Relay's createContainer.
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.
You should use a jsx tag in your render
function:
render(<App/>, document.getElementById('root'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With