Passing props to components using ReactLayout

help
1

Hey, folks. I’m just wondering what the best way is to complete this React task. Say, I have a component like this one:

App = React.createClass({
  //mixins: [ReactMeteorData],

  // Initial State declared here.
  getInitialState() {
    return {};
  },

  proxyState(state) {
    console.log(`Triggered proxyState, top-level: ${state}`);
  },

  render() {
    return (
      <div>
        {this.props.layout}
      </div>
    );
  }

});

I need to be able to pass down proxyState(state) to a great-grandchild component, where the child (and grandchild) will be rendered using ReactLayout.

As an example, here’s a bit of code from FlowRouter showing how I’m currently rendering the component(s) that are involved with this chain:

FlowRouter.route('/proxies', {
  name: 'proxies',
  action() {
    const content = <ProxyPage />;
    ReactLayout.render(App, {
      title: 'Proxies',
      layout: <MainLayout content={content} />
    });
  }
});

The content renders just fine, but what I don’t understand how to do is pass proxyState() down to <MainLayout /> (and subsequently, <ProxyPage /> that will be rendered inside it, and then <ProxyForm />, which gets rendered inside that.

Any assistance would be greatly appreciated. I’m new to the concept of passing props around, and I guess this might be a semi-advanced thing for someone who has been writing React stuff for maybe 3 days now. Thanks in advance!

As for the rest of my code, this project is currently in a public BitBucket repository located here: https://bitbucket.org/czbaker/karuto/

1 Like