GreGGus GreGGus - 21 days ago 9
React JSX Question

Redux & React-router : Provider bug

I'm starting new app using ReactJS. All the web env is quite new for me.

Anyway, I created an simple App, using react-router. Works perfectly :).

I tried to add Redux, and ... fail. I have no idea how use React-redux AND react-router.

Here's my input JS : index.js

class App extends React.Component{
render(){
return(
<div>
{routes}
</div>
);
}
}

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


Here's my route.js

export default (
<Router history={hashHistory}>
<Route path='/' component={Main}>
<IndexRoute component={Home} />
<Route path='playerOne' header="PlayerOne" component={PromptContainer} />
<Route path='playerTwo/:playerOne' header="PlayerTwo" component={PromptContainer} />
<Route path='battle' component={ConfirmBattleContainer} />
<Route path='results' component={ResultsContainer} />
<Route path='maninthemiddle' component={ManinthemiddleContainer} />
<Route path='button' component={ButtonContainer} />
</Route>
</Router>
);


and ofc my reducer.js

import reducer from './reducer.js'
import { createStore } from 'redux';


const store = createStore(reducer);

export default store;


And this is my error.


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


and my warning :


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


I know that Provider have to be on "top" of the app, but it's exactly what I did. I'm lost :(

Thanks for your helps guys.

Answer

You need to remove the whitespace around <App />. This:

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

should be:

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

the spaces in there are being treated as text nodes, i.e. additional children.