How do I wrap this child in an Higher Order Component?

Question

const LoggedInView = (props) => <Text>You are logged in!</Text>
export default withAuth(LoggedInView)


const withAuth = (component) => <AuthRequired>{ component }</AuthRequired>


const AuthRequired = (props) => {
    const context = useContext(AuthContext)
    if(!context.auth){
        return (
            <View style={styles.container}>
               <Text>You need to login . Click here</Text>
            </View>
        )
    }
    return props.children 
}

My <AuthRequired> view works fine, but my withAuth does not.

score 2 · Accepted Answer · answered Oct 02 '19 at 23:02

HOCs take a component and return another component. You're taking a component and returning a React node, not a component. Docs reference

In your case, you should be able to do something like:

const withAuth = (Component) => (props) => <AuthRequired><Component ...props /></AuthRequired>

It might be easier to understand as:

function withAuth(Component) {
    return function WithAuthHOC(props) {
        return (
            <AuthRequired>
                <Component ...props />
            </AuthRequired>
        );
    }
}

score 1 · Answer 2 · answered Oct 02 '19 at 23:23

You can use Auxiliary component. It is a higher order component. Auxiliary element is something that does not have semantic purpose but exist for the purpose of grouping elements, styling, etc. Just create a component named Aux.js and put this on it:

const aux = ( props ) => props.children;

export default aux;

Then wrap withAuth with Aux.

const withAuth = (component) => {
     return ( 
           <Aux> 
               <AuthRequired>{ component }</AuthRequired>
           </Aux> 
      );
}

score 0 · Answer 3 · answered Oct 02 '19 at 22:54

As I know, you cannot return a function as children in React. How about you trying this?

const LoggedInView = <div>You are logged in!</div>;

This code works when I tried on my laptop.

Please, take a look at this link: Functions are not valid as a React child. This may happen if you return a Component instead of from render

How do I wrap this child in an Higher Order Component?

3 Answers3