title: React - calling function from a sibling component
body: <p>Let's say I have a component tree as follows</p>
  
  <pre><code>&lt;App&gt;
    &lt;/Header&gt;
    &lt;Content&gt;
        &lt;SelectableGroup&gt;
            ...items
        &lt;/SelectableGroup&gt;
    &lt;/Content&gt;
    &lt;Footer /&gt;
  &lt;/App&gt;
  </code></pre>
  
  <p>Where <code>SelectableGroup</code> is able to select/unselect items it contains by mouse. I'm storing the current selection (an array of selected items) in a redux store so all components within my App can read it.</p>
  
  <p>The <code>Content</code> component has set a <code>ref</code> to the <code>SelectableGroup</code> which enables me to clear the selection programatically (calling <code>clearSelection()</code>). Something like this:</p>
  
  <pre><code>class Content extends React.Component {
  
      constructor(props) {
          super(props);
          this.selectableGroupRef = React.createRef();
      }
  
      clearSelection() {
          this.selectableGroupRef.current.clearSelection();
      }
  
      render() {
          return (
              &lt;SelectableGroup ref={this.selectableGroupRef}&gt;
                  {items}
              &lt;/SelectableGroup&gt;
          );
      }
  
      ...
  
  }
  
  function mapStateToProps(state) {
      ...
  }
  
  function mapDispatchToProps(dispatch) {
      ...
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Content);
  </code></pre>
  
  <p>I can easily imagine to pass this <code>clearSelection()</code> down to <code>Content</code>s children. But how, and that is my question, can I call <code>clearSelection()</code> from the sibling component <code>Footer</code>? </p>
  
  <ul>
  <li>Should I dispatch an action from <code>Footer</code> and set some kind of "request to call clear selection" state to the Redux store? React to this in the <code>componentDidUpdate()</code> callback in <code>Content</code> and then immediately dispatch another action to reset this "request to call clear selection" state?</li>
  <li>Or is there any preferred way to call functions of siblings?</li>
  </ul>