CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Jjang
Jjang

Reputation: 11444

Invalid prop children in Provider

I've been learning React for the past several weeks.
First developed a simple Chat with plain React, and now I started integrating Redux into my app.

I added a simple Action, a matching Reducer (along with a root reducer) and a Store. I then reached the part where I need to use the Provider from the react-redux library:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import ConfigureStore from './Store/ConfigureStore';
import Routes from './Routes';

const store = ConfigureStore();
ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}
            routes={Routes} />,
    </Provider>,
    document.getElementById('root')
);

App compiles fine, but I receive the following errors in console:

Warning: Failed prop type: Invalid prop children of type array supplied to Provider, expected a single ReactElement. in Provider

and

Uncaught Invariant Violation: React.Children.only expected to receive a single React element child.

I'm using the React Create App as a starter kit.

Full code can be found here.

Upvotes: 7

Views: 6963

Answers (3)

Arnab Dibosh
Arnab Dibosh

Reputation: 26

To me writing in this format was throwing error:

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

But this works fine:

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

Upvotes: 1

Luciano
Luciano

Reputation: 234

The same error:

Warning: Failed prop type: Invalid prop children of type array supplied to Provider, expected a single ReactElement.

Uncaught Error: React.Children.only expected to receive a single React element child.

Occurs to me in writing Provider with this format:

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

instead the following works correctly:

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

Upvotes: 9

iamnat
iamnat

Reputation: 4166

You have a , after <Router history={browserHistory} routes={Routes} />

Try removing it?

Upvotes: 12

Related Questions