React.js How to render component inside component? : <p>I am stuck. I have several seperate components on seperate files.  If I render them in main.jsx like following: </p>

<pre><code>ReactDOM.render(&lt;LandingPageBox/&gt;, document.getElementById("page-landing")); 
ReactDOM.render(&lt;TopPlayerBox topPlayersData={topPlayersData}/&gt;, document.getElementById("wrapper profile-data-wrapper"));
ReactDOM.render(&lt;RecentGamesBox recentGamesData={recentGamesData}/&gt;, document.getElementById("history wrapper"));
</code></pre>

<p>Everything works fine, but I wonder if it is a good practice? Maybe it is possible to do something like there would be only one ReactDom.render like: </p>

<pre><code>ReactDOM.render(&lt;LandingPageBox recentGamesData={recentGamesData} topPlayersData={topPlayersData}/&gt;, document.getElementById("page-landing")); 
</code></pre>

<p>I tried different kinds of variatons of LandingPageBox to somehow include those other two components, but had no luck. They sometimes rendered outside the page and so on. I thought it should look something like this:</p>

<pre><code>import React from 'react';
import RecentGames from '../RecentGames/RecentGames.jsx';
import TopPlayers from '../TopPlayers/TopPlayers.jsx';
import PageTop from './PageTop.jsx';
import PageBottom from './PageBottom.jsx';

class LandingPageBox extends React.Component {
    render() {
        return (
            &lt;body className="page-landing"&gt;
                &lt;PageTop&gt;
                     &lt;TopPlayers topPlayersData={this.props.topPlayersData} /&gt;
                &lt;/PageTop&gt;
                &lt;PageBottom&gt;
                        &lt;RecentGames recentGamesData=    {this.props.recentGamesData}/&gt;
                    &lt;/PageBottom&gt;              
                &lt;/body&gt;
            );
        }
    }

export default LandingPageBox;
</code></pre>

<p>But this code only renders PageTop and PageBottom, without player or game components. </p>

<p>So my question would be, how to set up LandingPageBox file so that TopPlayers component would render inside PageTop component and RecentGames component would render inside PageBottom component? Thank you.</p>
