title: Reactjs: Accessing 'this' of a sibling component
body: <p>I have a situation where I have 3 components; <code>&lt;View&gt;</code> <code>&lt;Content&gt;</code> and <code>&lt;Footer&gt;</code>.</p>
  
  <p><code>&lt;View&gt;</code> is parent of <code>&lt;Content&gt;</code> and <code>&lt;Footer&gt;</code>. Now there is a button in <code>&lt;Footer&gt;</code> and when it is clicked, I want to render an <code>Overlay</code> in the <code>&lt;Content&gt;</code> component, so i have to have access to <code>this</code> of the <code>&lt;Content&gt;</code> component inside my <code>&lt;Footer&gt;</code> component. I am not getting on how to accomplish that.</p>
  
  <p><code>View.js</code></p>
  
  <pre><code>class View extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Content messages={this.props.messages}/&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p><code>Content.js</code></p>
  
  <pre><code>class Content extends Component {
    render() {
      return (
        &lt;div&gt;
          {this.props.messages}
        &lt;/div&gt;
      )
    }
  
  }
  </code></pre>
  
  <p><code>Footer.js</code></p>
  
  <pre><code>class Footer extends Component {
    constructor(props,context){
      super(props,context);
      this.state = {
        showEmojiPicker: false,
      }
    }
  
    handleToggleEmojiPicker() {
      this.setState({
        showEmojiPicker: !this.state.showEmojiPicker,
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;div&gt;
              &lt;bootstrap.Button ref="targetEmojiPicker" bsSize="xsmall" onClick={this.handleToggleEmojiPicker.bind(this)}&gt;
                &lt;bootstrap.Glyphicon glyph="heart" /&gt;
              &lt;/bootstrap.Button&gt;
                &lt;bootstrap.Overlay
                    show={this.state.showEmojiPicker}
                    onHide={this.handleClose.bind(this)}
                    container={content.this}  //Need this of Content component
                    target={() =&gt; ReactDOM.findDOMNode(this.refs.targetEmojiPicker)}
                &gt;
                &lt;EmojiModalCategories actions={this.props.actions}/&gt;
              &lt;/bootstrap.Overlay&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      )
    }
  
  }
  </code></pre>