How to pass reactive data to children using Flow Router and React Layout

react
21

Maybe such variant could help you:

action() {
  ReactLayout.render(Layout, {
    content: <Component paramName={ params.paramName } />
  });
}
22

tl;dr
I think the real problem here is that there is a fundamental flaw in the design of ReactLayout.

When I attempt to use React.createElement as per above in the top-level layout component, I get the following error:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

While I am able to pass down props from the top-level component using React.cloneElement, it just somehow feels wrong for the entire view basically to be a cloned component.

Additionally, as per the React docs, this method should only be used in “rare situations” so using it for every view would certainly not be rare.

It seems to me that the real issue here is with ReactLayout. Based on @arunoda’s comment in the original issue posting, it seems as if ReactLayout has been designed with the assumption that the top-level component should only be used for layout.

Imo, that comment reflects a fundamental misunderstanding of React - the idea that your top-level component would basically be a “dumb” component, when I would say that the opposite would be true - your top-level component should actually be a “controller” component.

Am I off base here? How can one manage user state globally in an app using ReactLayout with FlowRouter without having to replicate a check for user state in every view? Is it basically assumed that one will use redux/meteorflux or the like?