title: ReactJS - {this.props.children} is undefined
body: <p>I have seen many post related this argument but i'm not able to understand why <code>{this.props.children}</code> is undefined in my application (i'm really new to ReactJS)</p>
  
  <p>Starting with <code>App.js</code> that is my main component i have this:</p>
  
  <pre><code>import React, {Component} from 'react';
  import Dashboard from './layouts/Dashboard';
  
  class App extends Component {
      render() {
          return(
              &lt;div id="container"&gt;
                  &lt;Dashboard /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>So, <code>Dashboard.js</code> have to code to render a top bar and a left-side bar, the "dynamic" content will go on the center (and this is where i have placed <code>{this.props.children}</code>)</p>
  
  <pre><code>Dashboard.js
  
  render() {
      return(
          &lt;div className="content" id="wrapper"&gt;
              &lt;!-- Navbar and sidebar code --&gt;
              &lt;-- this is the dynamic content --&gt;
              &lt;div id="page-wrapper" className="page-wrapper" ref="pageWrapper"&gt;
                  {this.props.children}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>The router right now is very simple:</p>
  
  <pre><code>&lt;Route component={App}&gt;
      &lt;Route path='/' component={Home} /&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>I have omitted the code related to Home.js, but this is a simple <code>div</code> that print in statyc way <code>"Hello World"</code></p>
  
  <p>Dashboard component is renderd but no "Hello World" is placed in the part where i have {this.props.children}</p>