reactjs - Unable to get props.children while using Provider in React -

i newbie react. partially following tutorial full-stack-redux-tutorial creating web application. using 'react-redux' pass data receive server 1 of components. index.jsx file looks following

     import routes './routes.jsx';           const socket = io(`${location.protocol}//${location.hostname}:8090`);      socket.on('curr_all_news', curr_all_news =>       store.dispatch(setcurrentallnews(curr_all_news))     );  const createstorewithmiddleware = applymiddleware(   remoteactionmiddleware(socket) )(createstore); const store = createstorewithmiddleware(reducer);              reactdom.render((               <muithemeprovider muitheme={getmuitheme()}>                 <provider store={store}>                   <router>{routes}</router>                 </provider>               </muithemeprovider>),                      document.getelementbyid('root')             ); 

the routes.jsx file looks following

import mainnav './components/navbar.jsx'; import app './components/app.jsx'; import {homepagecontainer} './components/sportshome.jsx';      const routes =<mainnav component = {app}>         <switch>             <route exact path="/" component={homepagecontainer}/>             <route path ="/login" component = {loginpage}/>             <route path ="/signup" component = {signuppage}/>         </switch>      </mainnav>; 

my app.jsx has following code

import { component } 'react';      export default class app extends component {         render() {             return this.props.children;         }     }; 

finally, homepage has following code

export class homepage extends purecomponent{   render() {           return <div classname="news-holder">             <div classname="containerwrapper">               <div classname="s-row">                 <div classname="col-sm-12">                   checking workng of custom written div                     <newspanel {...this.props} />                 </div>                </div>             </div>           </div>;   } };  function mapnewstoprops(curr_all_news){   console.log("curr_all_news here:",curr_all_news);   return {     news:curr_all_news   } } export const homepagecontainer = connect(mapnewstoprops,actioncreators)(homepage); 

my question unable value of curr_all_news on home page.i.e getting empty list (list {size: 0, _origin: 0, _capacity: 0, _level: 5, _root: undefined…})as value of curr_all_news in mapnewstoprop function instead of supposed list of objects. able fetch value server , bring client via socket in app.jsx component given mainnav render function never gets called.i unable figure out missing.thanks in advance

my navbar.jsx looks below

import react, { component, proptypes } 'react'; import { navbar, nav, navitem } 'react-bootstrap'; import { linkcontainer } 'react-router-bootstrap';  class mainnav extends component {      constructor(props) {         super(props);         this.state = {          loggedin: 1,         };     }     render() {         return (              <div>                 <navbar inverse collapseonselect>                     <navbar.header>                         <navbar.brand>                             <a href="/">sportsspot</a>                         </navbar.brand>                     <navbar.toggle />                     </navbar.header>                     <navbar.collapse>                         <nav>                             <linkcontainer to="/nfl">                                <navitem>nfl</navitem>                             </linkcontainer>                             <linkcontainer to="/mlb">                                <navitem>mlb</navitem>                             </linkcontainer>                             <linkcontainer to="/nba">                                <navitem>nba</navitem>                             </linkcontainer>                             <linkcontainer to="/nhl">                                <navitem>nhl</navitem>                             </linkcontainer>                            </nav>                     <nav pullright>                         <linkcontainer to="/login">                                 <navitem>login</navitem>                         </linkcontainer>                         <linkcontainer to="/signup">                             <navitem>sign up</navitem>                         </linkcontainer>                     </nav>                     </navbar.collapse>                 </navbar>                 <div classname="content">                         {this.props.children}                 </div>             </div>         )     } }  mainnav.proptypes = {   children: proptypes.element.isrequired, };  export default mainnav; 

you need correct few things in code.

1. you app component returns this.props.children. can return single element component. should wrap within div

   export default class app extends component {     render() {        return <div>{this.props.children}</div>     } }; 

2. mainnav takes component prop never using it. change structure following

       const routes =<mainnav>           <app>           <switch>               <route exact path="/" component={homepagecontainer}/>               <route path ="/login" component = {loginpage}/>               <route path ="/signup" component = {signuppage}/>           </switch>            </app>       </mainnav>; 

3. you need not export homepage class if connecting redux store.

    class homepage extends purecomponent{ 

and use like

    export default connect(mapnewstoprops,actioncreators)(homepage); 

and import as

   import homepagecontainer './components/sportshome.jsx';