Wrapping Provider in same component throws Element type is invalid: expected a string (for built-in components) or a class/function but got: object

I wrote a simple counter example in both Mobx & Redux & it works

Full demo is available https://codesandbox.io/s/nw303w6jxl

But if I remove Provider from ./src/index.js

Provider

./src/index.js

const App = () => (


---


);


& put it in ./src/redux.js while default exporting it throws an error

./src/redux.js

export default (
<Provider store={store}>
<ConnectReduxApp />
</Provider>
);


Uncaught Error: Invariant Violation: Element type is invalid: expected
a string (for built-in components) or a class/function but got: object

Its working but I don't know why its happening? I checked the typeof the default exported function from ./src/redux.js ,i.e,

typeof

./src/redux.js

console.log(
typeof(
<Provider store={store}>
<ConnectReduxApp />
</Provider>
)
);


& its an object but what if I want to use Redux only in a part of my React Application. Lets say a form. Then by this way it will throw an error. Any help is appreciated.

object

1 Answer
1

This is happening because you're exporting not a function returning JSX nor a class with a render method that returns JSX, you're exporting JSX itself.

Either render it like {reduxImported}:

{reduxImported}

import reduxImported from './src/redux.js'
...
render() {
<Container>
{reduxImported}
<MobX />
</Container>
}


Or change your export to:

export default () => (
<Provider store={store}>
<ConnectReduxApp />
</Provider>
)


sweet...thank you...it works :)
– deadcoder0904
Jun 30 at 4:12

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.