the-road-to-react-with-firebase / react-firebase-authentication

🔥 Boilerplate Project for Authentication with Firebase in React.
https://www.robinwieruch.de
1.02k stars 298 forks source link

Functions are not valid as a React child #41

Open Ajwah opened 3 years ago

Ajwah commented 3 years ago

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: https://github.com/the-road-to-react-with-firebase/react-firebase-authentication/blob/316a1759d4391fc4bf5ea55731608c8c227f24a8/src/components/App/index.js#L31-L33

Their common denominator is that they all compose over the HOC: withEmailVerification. When I comment out: https://github.com/the-road-to-react-with-firebase/react-firebase-authentication/blob/316a1759d4391fc4bf5ea55731608c8c227f24a8/src/components/Home/index.js#L16

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.