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}

Solution 1

You have to pass children to Dashboard:

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

Solution 2

You can't access the children of your component through this.props.children. this.props.children designates the children being passed onto you by the owner:

var App = React.createClass({
  componentDidMount: function() {
    // This doesn't refer to the `span`s! It refers to the children between
    // last line's `<App></App>`, which are undefined.
    console.log(this.props.children);
  },

  render: function() {
    return <div><span/><span/></div>;
  }
});

ReactDOM.render(<App></App>, mountNode);

To access your own subcomponents (the spans), place refs on them https://facebook.github.io/react/docs/more-about-refs.html

Solution 3

Dashboard has no children.

Change <Dashboard /> to <Dashboard>{this.props.children}</Dashboard> in App.js so your Dashboard component can have access to the component you pass through the Route.