Can't figure out react-mounter

This is definitely an @arunoda question, but I figured I’d ask here in case anyone else runs into this.

I’m having some trouble getting this working:

import React from 'react';
import {mount} from 'react-mounter';
import Layout from './containers/Layout.jsx';
import Home from './pages/Home.jsx';

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

For some reason, Layout is not being passed <Home />. But if I change that one line to this:

  content: <Home />

then it works great. According to the manual:

In order to use the React context, you need to render the content component inside the layout. So we need to pass a function instead of the React element.

I’m not exactly sure what “React context” means, so I don’t know if I need that syntax. But still, the documented syntax doesn’t appear to work for me. I’m sure I’m missing something simple here.

Oops. I’d normally delete this since it’s a stupid mistake, but people have expressed interest in even knowing the stupid gotchas. :wink:

If using content: () => <Component /> format, you have to then use context properly since it’s a function now. So this works:

export default Layout = ({content}) => (
  <div>
    Oops
    {content()}
  </div>
)