Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React.js How to render component inside component?

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.

like image 626
R. Vait Avatar asked Mar 13 '16 11:03

R. Vait


People also ask

How do you make components in a component React?

Components in Files React is all about re-using code, and it is recommended to split your components into separate files. To do that, create a new file with a . js file extension and put the code inside it: Note that the filename must start with an uppercase character.

Can we use render inside functional component?

render() has no interaction with any APIs. It is just a normal JavaScript function. This is a small difference, but it is a difference in favor of the simplicity of functional components. In general, any time you can reduce the API footprint of code, it is beneficial to the overall simplicity of the system.

Can we create component inside component in React?

So the simple fix is to not create a component inside functional component. directly inside return will fix our issue. return ( <div id="app" className="home-page"> <Header /> <WelcomeSlogan/> <UserList pattern={search}/> </div> ); So the take away - NEVER CREATE A COMPONENT INSIDE ANOTHER FUNCTION COMPONENT.


2 Answers

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.

like image 75
Nicole Avatar answered Sep 18 '22 21:09

Nicole


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

like image 36
Dmitriy Nevzorov Avatar answered Sep 17 '22 21:09

Dmitriy Nevzorov