React's getChildContext doesn't set child context properly?

[TimFletcher]

If I have a simple root component in React

AppLayout = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext: function() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  },

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

And a FlowRouter / ReactLayout setup like this

FlowRouter.route('/register', {
  name: 'register',
  action: function(params) {
    ReactLayout.render(AppLayout, { content: <AuthRegisterPage /> });
  }
});

Then within the render() method of AuthRegisterPage, this.context is undefined. However, if I don't use { this.props.content } and simply have <AuthRegisterPage /> within the AppLayout component then this.context returns {muiTheme: someobject} as I'd expect.

I'm not a react expert by any means. Am I missing anything?

[TimFletcher]

Could be related to this (and thus not a FlowLayout issue) — http://stackoverflow.com/questions/30368433/react-context-doesnt-transfer-when-using-a-component-as-prop

[arunoda]

I think it makes sense since we render it outside AppLayout. May be we can render it inside AppLayout. Let me give it a try.

[arunoda]

Yeah! It worked. Here's how to get this to work. So, basically, you need to render the component inside the layout. So, we can pass a function as the content. So, here's our layout:

AppLayout = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.string
  },

  getChildContext: function() {
    return {
      muiTheme: "blue-theme"
    };
  },

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

Here's our Login component:

LoginPage = React.createClass({
  contextTypes: {
    muiTheme: React.PropTypes.string
  },
  render() {
    return <div>
      <h1> Login Page { this.context.muiTheme } </h1>
    </div>
  }
});

Here's the router:

FlowRouter.route('/', {
  name: 'register',
  action: function(params) {
    ReactLayout.render(AppLayout, {
      content() { return <LoginPage /> }
    });
  }
});

[TimFletcher]

Ahhh, yes! Works great for me too. Thanks, Arunoda!

[arunoda]

BTW: Would you mind sending a PR to the README mentioning this issue and referencing to here.

[TimFletcher]

Absolutely.

[mbrookes]

This might be a "Duh Bob" moment, but I was also able to use this method (passing a function as the content) to propagate an event up to the layout from a button in a sub-component, and affect props on another component contained in the layout. (Specifically to set button state in a toolbar that is present in all views, so lives in the layout).

In Layout.jsx:

{this.props.content((result) => {this._someEventHandler(result)})}

And an associated function to set state or whatever: _someEventHandler(result) {...}

In routes.jsx:

FlowRouter.route('/', {
  action() {
    ReactLayout.render(MainLayout, { content(_myCallback) { return (
      <Component callback={(result) => {_myCallback(result)}}/>
    )}});
  }
});

In Component.jsx:

<SubComponent onTouchTap = {() => {this.props.callback(objectToBubbleUp)}} />

Is this the right way to go about it? It's a bit cumbersome, but it works...

[rulatir]

I just noticed something that might be unrelated but it might be the root cause of this problem as well. WHEN your app throws a RSOD on startup and that is the reason why you want to debug, then it might have happened that you have previously clicked on a stack frame on the RSOD. If you have, then RN communicated with whatever daemon is running on your PC that the command npm start in your app's directory starts, and that daemon launched your $EDITOR to show the file and line. If the editor is something like nano or mcedit that doesn't detach from terminal, then the daemon is blocked and stops responding, which is why RN can no longer speak to the debugger. The workaround (for linux) is to run npm start with $EDITOR=/bin/true.