title: React parent send data to multiple children
body: <p><a href="https://i.stack.imgur.com/rDZut.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rDZut.png" alt="enter image description here"></a></p>
  
  <p>I have a react app with the above structure, where a parent has a sidebar and renders two children: Content and Rightbar.</p>
  
  <p>When a link in the parent is clicked, I need to update both the Content and Rightbar sections.</p>
  
  <p>Here is part of the code:</p>
  
  <pre><code>ReactDOM.render(
      &lt;Router history={hashHistory}&gt;
          &lt;Route path="/" component={App}&gt;
              &lt;IndexRedirect to="/select" /&gt;
              &lt;Route path="/select" component={Select}&gt;
                  &lt;Route path="foo" component={Foo} /&gt;
                  &lt;Route path="bar" component={Bar} /&gt;
                  &lt;Route path="baz" component={Baz} /&gt;
              &lt;/Route&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;
  , destination );
  </code></pre>
  
  <p>Inside the Select class:</p>
  
  <pre><code>        &lt;div className="sidebar"&gt;
                  &lt;Link to="select/foo"&gt;Foo&lt;/Link&gt;
                  &lt;Link to="select/bar"&gt;Bar&lt;/Link&gt;
                  &lt;Link to="select/baz"&gt;Baz&lt;/Link&gt;
          &lt;/div&gt;
  
          &lt;div className="content"&gt;
              {this.props.children}
          &lt;/div&gt;
  
          &lt;div className="rightbar"&gt;
              // I want to render a component here, but this.props.children can only contain one children
          &lt;/div&gt;
  </code></pre>
  
  <p>Any solution to solve this, or possibly a better way to do it?</p>
  
  <p>Thanks in advance.</p>