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

Question

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:

• react 15.0.1
• react-redux 4.4.5
• redux 3.4.0

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.

Answer 1

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 react@0.14.

Answer 2

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')
);

Answer 3

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.