How to make HOC in response

Question

I am trying to make the HOC responsive, but I cannot figure out how to do this. So I have one HOC that works great with reaction navigation. My idea is to show the component that render completes the HOC. I am trying to do this:

render() { return ( <View style={viewStyle}> {CheckLogin(Login)} </View> ); } 

this CheckLogin is the HOC, and Login is the component itself. As a result, React is not complaining, but empty. Any idea how to render the HOC invoking the component itself?

Answer 1

You simply call HOC as a function inside JSX, instead you need to use </> to display it.

 render() { const EnhancedComponent = CheckLogin(Login); return ( <View style={viewStyle}> <EnhancedComponent /> </View> ); }