How to render a HOC in react

Question

I'm trying to render a HOC with react but I cannot figure it out how to make it works. So I have one HOC that is working perfect with react-navigation. My idea is to show a component that the render wraps a HOC. I am trying to do sth like this:

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

this CheckLogin is the HOC and Login is the component itself. The result is that React is not complaining but is in blank. Any idea how to render a HOC invoking the Component itself??

Answer 1

You are just calling the HOC as a function inside the JSX, instead you need to use </> in order to render it.

// Apply your HOC
const EnhancedComponent = CheckLogin(Login);

class MyComponent extends Component {
  render() {      
    return (
      <View style={viewStyle}>
        <EnhancedComponent  />
      </View>
    );
  }
}