React.js How to render component inside component?

Question

I am stuck. I have several seperate components on seperate files. If I render them in main.jsx like following:

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

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:

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

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:

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 (
            <body className="page-landing">
                <PageTop>
                     <TopPlayers topPlayersData={this.props.topPlayersData} />
                </PageTop>
                <PageBottom>
                        <RecentGames recentGamesData=    {this.props.recentGamesData}/>
                    </PageBottom>              
                </body>
            );
        }
    }

export default LandingPageBox;

But this code only renders PageTop and PageBottom, without player or game components.

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.

I tried reading about it, but I just can't understand the concept. How does React knows which child to use if I have as in this example two? Also Maybe I wasn't clear on one thing too, that is that page should be rendered first, then inside of it those two components should be rendered, because page components have containers in which those components have to be put. — R. Vait
– R. Vait, Commented Mar 13, 2016 at 11:55

Nicole · Accepted Answer · 2016-03-13 13:11:10Z

56

In your example

return (
        <body className="page-landing">
            <PageTop>
                 <TopPlayers topPlayersData={this.props.topPlayersData} />
            </PageTop>
            <PageBottom>
                 <RecentGames recentGamesData=    {this.props.recentGamesData}/>
            </PageBottom>              
        </body>
       );

React will only render the top-level custom components PageTop and PageBottom, as you already found out. The other components (TopPlayers and RecentGames) are nested within those components. What does that mean? React does not just display those nested components because it would not know how to do this. Instead, all rendering must be done by the outer components PageTop and PageBottom. React just passes the nested components to them (PageTop gets TopPlayers, PageBottom gets RecentGames) in this.props.children. Now it is up to the outer components what to do with these nested components. In your example, you would modify the PageTop and PageBottom components to use {this.props.children} to display their nested components in a suitable way.

answered Mar 13, 2016 at 13:11

Nicole

1,7071 gold badge15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R. Vait Over a year ago

Thank you. Very good explanation. Everything works like a charm.

Dmitriy Nevzorov · Accepted Answer · 2016-03-13 11:25:39Z

45

You are right. You can use as many nested components as you want. It's one of the main concepts in react. You can access them in this.props.children. Do it like this:

var Parent = React.createClass({
  render: function() {
    return <div>{this.props.children}</div>;
  }
});

ReactDOM.render(
  <Parent>
    <Child/>
    <Child/>
  </Parent>,
  node
);

Read more here - https://facebook.github.io/react/docs/multiple-components.html

And here - http://buildwithreact.com/article/component-children

answered Mar 13, 2016 at 11:25

Dmitriy Nevzorov

6,0881 gold badge24 silver badges28 bronze badges

3 Comments

R. Vait Over a year ago

Maybe you could show me where to put {this.props.children} in my example? I am very new to React.js.

A-S Over a year ago

Great references!

Ace Zachary Over a year ago

After spending hours and I finally found this! Thanks mate!

santosh sutar · Accepted Answer · 2019-12-25 15:12:09Z

2

Here Car component is inside the another component i.e Garage components. When Garage component in rendering Car component is also renders. Same concept as like one function inside another function.

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

answered Dec 25, 2019 at 15:12

santosh sutar

1661 silver badge3 bronze badges

Collectives™ on Stack Overflow

React.js How to render component inside component?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related