title: How to pass prop to sibling in React?
body: <p>I've <a href="http://codepen.io/ccorcos/pen/jPzNpP" rel="nofollow noreferrer">designed a pretty simple responsive layout</a> (be sure to open link with Chrome) and now I'm trying to implement it in React. I've attached some screenshots of the layout as well.</p>
  
  <p>This app is supposed to be the typical tab/nav app, but due to the responsive layout, the view hierarchy is pretty awkward to work with in React.</p>
  
  <p>I've built a React component called <code>Layout</code> to abstract away all the layout stuff. Layout also has props for <code>renderLeft</code>, <code>renderRight</code>, <code>title</code>, and <code>onTab</code>. Layout's children are then rendered into the content block. </p>
  
  <p>The easy solution would be to make Layout a child of the current view and render whatever you want. However, this is going to mess up some animations I had in mind. I want to have a CSSTransitionGroup element wrapped around the tabbar, the title, and the left and right buttons animating them as they change. Thus, <strong>the <code>Layout</code> element must remain the same between the views else a new CSSTransitionGroup element will be rendered for each view</strong> which isn't good.</p>
  
  <p>So now the problem is that I have a <code>Layout</code> component with a view rendered as its child (but sort of as sibling with respect to the <code>App</code> component), but the view needs to specify <code>renderLeft</code>, <code>renderRight</code> and <code>title</code> for the Layout which is its parent! For example, in the top-level <code>App</code> component, the render function may look like the following, and I need some way of setting Layout's <code>renderLeft</code> from the <code>View</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
      return (
          &lt;Layout renderLeft={??}&gt;
            &lt;View setRenderLeft={??}/&gt;
          &lt;Layout/&gt;
      )
  }
  </code></pre>
  
  <p>The only thing I've thought of so far seems totally like the wrong way of doing it: </p>
  
  <p>In the top-level <code>App</code> component, have a state variables for <code>renderLeft</code>, <code>renderRight</code>, and <code>title</code> and <code>App</code> passes those to the <code>Layout</code> props. Now for the view, pass some functions like <code>setRenderLeft</code>, <code>setRenderRight</code>, and <code>setTitle</code> which will change the <code>App</code> state and thus change the <code>Layout</code>. We can thus call these functions in <code>componentWillMount</code> for each view. </p>
  
  <p>This just seems like a total hack and seems to break the whole idea of one-directional-data-flow. However, I'm not sure how else to do it! Are there any more proper ways of doing this? I'm reminded of the concept of delegation when building iOS apps, but thats very OOP and not very FP.</p>
  
  <p>Any ideas?</p>
  
  <p><img src="https://i.stack.imgur.com/jGrKM.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/MiL0U.png" alt="enter image description here"></p>