[Solved] Trying to use React mounter as layout manager but not sure why content passed isn't rendering, any ideas?

help
1

Hi guys, I am trying to use react-mounter as a layout manager, similar to @arunoda’s mantra example. But my MainLayout is rendering without the content component I am passing to it through FlowRouter. Any idea why that’s happening?

My router.jsx

FlowRouter.route('/', {
  name: 'home',
  action() {
    mount(MainLayout, {
      content: () => (<Home />)
    });
  }
});

My MainLayout

const MainLayout = ({content = () => null}) => (
  <div className="MainLayout">
    <header>
      This is our header
    </header>
    <main>
      {content}
    </main>
  </div>
);

export default MainLayout;

My Home.jsx

class Home extends React.Component {
  render() {
    return (
      <div className="Home">
        <h1>Home</h1>
      </div>
    );
  }
}

export default Home;
2

I figured it out, the content passed has to be rendered inside the layout which is why we need to pass a function. So the Layout component needs to be:

const MainLayout = ({content = () => null}) => (
  <div className="MainLayout">
    <header>
      This is our header
    </header>
    <main>
      {content()} <- Content has to be a function
    </main>
    <footer>
      <p>Now you shall sleep!</p>
    </footer>
  </div>
);

export default MainLayout;
3

That’s the case when you want to use React contexts, as explained in the react-mounter docs. In your example you were calling mount passing a React class (defined by a stateless function: { content: () => (<Home />) }), but in your layout you were resolving it as an element ({content}). So another option might be calling mount with { content: <Home /> }. Not saying this is better! Just another option.