FlowRouter - Inserting content to HTML template

Question

I'm trying to learn meteor-react, and I have a question about using FlowRouter to insert content into HTML template pages.

Let's assume everything is imported correctly, this is the relevant code:

routes.jsx

FlowRouter.route('/post/:postId', {
  name: 'posts.single',
  action({postId}) {
    mount(MainLayoutCtx, {
      content: () => (<Post postId={postId}/>)
    });
  }
});

index.jsx - where MainLayoutCtx is pointing to

const Layout = ({content = () => null }) => (
  //code here
);

In index.jsx, {content = () => null}. Doesn't this mean content is an object literal that has no parameters and outputs null?

But when content is being passed in routes.jsx, it's () => (/Post postId={postId}/>) So isn't that content outputting Post with postId passed in as a prop?

How does this match with what index.jsx is expecting?

Answer 1

In your example, content is a function literal with no input parameters in both cases, and it returns a new React component. (null is a valid React component, too.)

content: () => (<Post postId={postId}/>)

In this case postId is not a parameter, but a closure variable. The closure object gets created runtime embedding the value of postId when that is of code is reached.

In index.jsx your layout expects a function with no parameters that returns a React component, and that's exactly what content is. And when you call content(), it creates a new Post component, and passes the postId from its closure object as props.