How to pass data from Layout to child

[vladshcherbin]

Okay, I've got a small question. We have a route:

FlowRouter.route('/test', {
  name: 'admin.permissions.index',
  action: function () {
    ReactLayout.render(AdminLayout, {
      content: <AdminPermissionsIndex />
    });
  }
});

So, in the top AdminLayout we have getMeteorData() and render:

getMeteorData() {
  return {
    currentUser: Meteor.user()
  };
},
render() {
  <section>
    {this.props.content}
  </section>
}

Now I need to pass this.data.currentUser as props to its child (AdminPermissionsIndex). Am I doing it right and how can I do it?

[arunoda]

Then it's kind a hard to get it. Try to do it in a component below the layout. Think, layout component simply does basic layouts and does not deal with reactive data.

[vladshcherbin]

@arunoda thanks for the quick reply, but I don't get it. The top component (Layout) is what needs to control all components below, no? So, what you proposing is:

<AppComponent> (does nothing, only has the place to insert smth)
  <AdminLayout> (has reactive data and passes to children)
    <AdminPermissions> (finally has the props)

So, I cant pass smth like ReactLayout.render(AppComponent, {content: <AdminLayout />}); because it will be the same for all routes.

The only way is to have getMeteorData in all templates. Am I missing something?

[andersr]

This, to me, this is a fundamental flaw in the design of FlowRouter/react-layout. It should be easy to pass props down from the top-level component. Not being able to do so, imo, contradicts the thinking behind React and forces users of FlowRouter to resort to hacks.