CODEWITHSUNDEEP
javascriptreactjsreact-nativeredux
Ruffeng
Ruffeng

Reputation: 557

How to render a HOC in react

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??

Upvotes: 6

Views: 6284

Answers (1)

Crysfel
Crysfel

Reputation: 8158

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>
    );
  }
}

Upvotes: 13

Related Questions