ReactJS - {this.props.children} is undefined

Question

I have seen many post related this argument but i'm not able to understand why {this.props.children} is undefined in my application (i'm really new to ReactJS)

Starting with App.js that is my main component i have this:

import React, {Component} from 'react';
import Dashboard from './layouts/Dashboard';

class App extends Component {
    render() {
        return(
            <div id="container">
                <Dashboard />
            </div>
        );
    }
}

So, Dashboard.js 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 {this.props.children})

Dashboard.js

render() {
    return(
        <div className="content" id="wrapper">
            <!-- Navbar and sidebar code -->
            <-- this is the dynamic content -->
            <div id="page-wrapper" className="page-wrapper" ref="pageWrapper">
                {this.props.children}
            </div>
        </div>
    );
}

The router right now is very simple:

<Route component={App}>
    <Route path='/' component={Home} />
</Route>

I have omitted the code related to Home.js, but this is a simple div that print in statyc way "Hello World"

Dashboard component is renderd but no "Hello World" is placed in the part where i have {this.props.children}

Answer 1

You have to pass children to Dashboard:

class App extends Component {
    render() {
        return(
            <div id="container">
                <Dashboard>{this.props.children}</Dashboard>
            </div>
        );
    }
}