Passing react component up the tree, is it good practice?

In my application i have a need to display pop-up dialogs. Those dialogs need to be located near the top of DOM tree to make absolute positioning work properly. Each page can have different dialog.

I have an app structure like this

var Dialog = React.createClass({
    render: function() {
        return <div> Hello world! </div>
    }
});

var Page = React.createClass({
    handleClick: function() {
        this.props.onDialogChange(<Dialog />)
    },
    render: function() {
    return (
      <div onClick = {this.handleClick}>
        Click me!
      </div>
    );
 }
});

var App = React.createClass({
  getInitialState: function() {
    return {dialog: null};
  }, 
  handleDialogChange: function(dialog) {
    this.setState({dialog: dialog});
  },
  render: function {
    return (
      <div>
        {this.state.dialog}
        <Page onDialogChange = {this.handleDialogChange} />
      </div>
    );
  }
});

Everything works, but i have a warning in the console

Warning: owner-based and parent-based contexts differ

Am i doing it wrong and should i refactor my app structure?