First, some context.

I'm using Redux to manage authentication state of my app and have Auth as a Redux container (or smart ponent).

I've created a wrapper (a higher-order ponent) that takes Auth and returns it:

export default function AuthWrapper(WrappedComponent) {
  class Auth extends Component {
  ... <Auth stuff here> ...
  }
  return connect(mapStateToProps, mapDispatchToProps)(Auth);
}

It seems to me that in order to use the wrapper, I just need to invoke it with a ponent I want to have behind my auth. For example, let's say I'm authenticating a ponent called UserPage with the wrapper, à la:

const AuthenticatedUserPage = AuthWappper(UserPage)

However, when I use the wrapper like this, React isn't happy with me. I get the following error:

Warning: AuthenticatedApp(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

My best guess is that it doesn't like the connect-ified ponent that Redux will create when I return it from AuthWrapper... which leads me to my question:

Does React support higher-order ponents when those ponents create Redux containers? And if so, why would React be throwing this error?

First, some context.

I'm using Redux to manage authentication state of my app and have Auth as a Redux container (or smart ponent).

I've created a wrapper (a higher-order ponent) that takes Auth and returns it:

export default function AuthWrapper(WrappedComponent) {
  class Auth extends Component {
  ... <Auth stuff here> ...
  }
  return connect(mapStateToProps, mapDispatchToProps)(Auth);
}

It seems to me that in order to use the wrapper, I just need to invoke it with a ponent I want to have behind my auth. For example, let's say I'm authenticating a ponent called UserPage with the wrapper, à la:

const AuthenticatedUserPage = AuthWappper(UserPage)

However, when I use the wrapper like this, React isn't happy with me. I get the following error:

Warning: AuthenticatedApp(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

My best guess is that it doesn't like the connect-ified ponent that Redux will create when I return it from AuthWrapper... which leads me to my question:

Does React support higher-order ponents when those ponents create Redux containers? And if so, why would React be throwing this error?

• javascript
• reactjs
• redux
• higher-order-ponents

• also important: stackoverflow./questions/42307736/… – Sean Kwon Commented Mar 1, 2017 at 17:52

1 Answer 1

Here's my two cents. I think the error is occurring elsewhere.

According to this simplified version of the connect function in react-redux, the connect function is simply returning another react ponent. So in your case, you're returning a ponent, wrapped inside another ponent, which is still valid. A container is basically a ponent.

Read https://gist.github./gaearon/1d19088790e70ac32ea636c025ba424e for a better understanding of the connect function.

I also tried the following in my own application and it worked.

import Layout from '../ponents/Layout'
//Do some other imports and stuff
function wrapper(Layout) {
  return connect(null, mapDispatchToProps)(Layout);
}
export default wrapper()

Like the error states, you might just simply be returning an invalid ponent somewhere in your app. Your app might be throwing the error because you're not wrapping a return call in parentheses on your render method.