Skip to content

Functions are not valid as a React child #41

Open
@Ajwah

Description

@Ajwah

Once I implemented the chapter: Email Verification I get the 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.

Screen Shot 2020-11-15 at 9 18 42 AM

This warning is generated for the following router components:

<Route exact path={ROUTES.HOME} component={HomePage} />
<Route exact path={ROUTES.ACCOUNT} component={AccountPage} />
<Route exact path={ROUTES.ADMIN} component={AdminPage} />

Their common denominator is that they all compose over the HOC: withEmailVerification. When I comment out:

then the warning disappears.

I tried googling for answers and found this: https://stackoverflow.com/a/48458532/4400976 but I do not see how our HOC is being misused as a regular component as the answer is alluding to. It is the exact same pattern we are using for withAuthorization and withAuthentication; e.g. a declaration of HOC that embeds the argument Component by means of a closure and that we use for our compositions accordingly. But the warning would not come about then.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions