CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
modernator
modernator

Reputation: 4427

React error 'Failed propType: Invalid prop `children` supplied to `Provider`, expected a single ReactElement'

i have some problem with React.js. this is my code:

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './containers/App';
import todoApp from './reducers';

let store = createStore(todoApp);
let rootElement = document.getElementById('root');

React.render(
    <Provider store={store}>
        {() => <App />}
    </Provider>,
    rootElement
);

and runs the page, it saids:

Failed propType: Invalid prop children supplied to Provider, expected a single ReactElement

this is the list of my related installed node modules:

actually, i am currently learning React with Redux, so it is hard to me how should i do. i just followed tutorial on website(i can give a link, but it is not english) but it is just not working with that error message. as i searched, someone said upgrade version of react and react-redux, but i installed latest versions. any advice will be very appreciate it.

Upvotes: 40

Views: 115818

Answers (4)

sandeep rathod
sandeep rathod

Reputation: 105

I had the same error but it was in case of an Overlay...the solution that worked for me is just removing the white spaces in between the component props .

for example :

<Overlay isVisible={global.ShowdispatchToDriverFlag} overlayStyle={{alignItems:"center",
                   justifyContent:"center",width:"95%",height:"95%",backgroundColor:"#ffffff"}}>

in the above there were white spaces between isvisible prop and overlaystyle removed the same and the error was gone.

Upvotes: 0

str8up7od
str8up7od

Reputation: 348

I was brought to this and I simply forgot to provide a prop. I would say make sure that you are providing all the props that your component is using and that should fix it.

Upvotes: 2

nick rodriguez
nick rodriguez

Reputation: 107

The original question had a typo. Your response is correct in the proper syntax.

However, the direct reason is that <App /> needs to be on a separate line.

If you put it on the same line as <Provider store={store}> React/Redux tries to do more with it than it should.

ReactDOM.render(
<Provider store={store}>
  <App />
</Provider>,
  document.getElementById('root')
);

Upvotes: 8

wuct
wuct

Reputation: 10477

According to the doc, you can just use a normal React element instead of a function inside <Provider />.

As a result, simply change your code to 

<Provider store={store}>
    <App />
</Provider>

I think this has changed since [email protected].

Upvotes: 24

Related Questions