I was working on the code of a practice for React, but I stopped because I have to make a navigation bar be shared among other pages

I found the next solution and it works but I don't know how exactly works; this is for a course project.

function Layout(props) {
  return(
    <React.Fragment>
      <Navbar />
      {props.children}
    </React.Fragment>
  );
}

I can't really know what really {props.children} does and how if Layout ponent start holding other ponents the Navbar ponent still appears

<Layout>
  <Switch>
    <Route exact path="/badges" ponent={Badges}/>
    <Route exact path="/badges/new" ponent={BadgeNew} />
  </Switch>
</Layout>

What happens behind the scenes?

I was working on the code of a practice for React, but I stopped because I have to make a navigation bar be shared among other pages

I found the next solution and it works but I don't know how exactly works; this is for a course project.

function Layout(props) {
  return(
    <React.Fragment>
      <Navbar />
      {props.children}
    </React.Fragment>
  );
}

I can't really know what really {props.children} does and how if Layout ponent start holding other ponents the Navbar ponent still appears

<Layout>
  <Switch>
    <Route exact path="/badges" ponent={Badges}/>
    <Route exact path="/badges/new" ponent={BadgeNew} />
  </Switch>
</Layout>

What happens behind the scenes?

• javascript
• reactjs
• ecmascript-6
• react-router

2 Answers 2

props.children means that React will render whatever u put between Layout ponent.

For ex, if u put a div block between Layout ponents, props.children will be that div.

Every JSX code that you put inside the Layout-tag, will be placed in children property of props-object of the Layout Component.

<Layout>
  <div>this is a child</div>
  <AnotherReactComponentAsLayoutChild/>
</Layout>