Accessing refs of a sibling component in React
<p>I have this situation where I have two sibling components, where the first component appears as follows:</p>

<pre><code>class X extends Component {

   someRenderMethod(){
       //does something 
   }  

   render(){
      return(
          &lt;div class="xyz"&gt;
             &lt;p&gt;some text&lt;/p&gt;
             &lt;div class="the-div-i-want-render" ref="one"&gt;
                   {this.someRenderMethod}
             &lt;/div&gt;
          &lt;/div&gt; 
      )
   }
}

function mapStateToProps(){
   //
}

function mapDispatchToProps(){
  //
}

export default connect(mapStateToProps, mapDispatchToProps)(X);
</code></pre>

<p>My second sibling component is as follows:</p>

<pre><code>    import X from './x'

    export class Y extends Component {

       render(){
          return (
               &lt;div&gt;
                  &lt;div&gt;
                         //Here I want to render the div inside   //component X
                         // In the real case, I show the div here in                   //response to a button click event. 
                        //I have tried to import the component and get           //the refs of X, but that is not working. 
                  &lt;/div&gt;

               &lt;/div&gt;

           )
       }
    }
</code></pre>

<p>I have tried to import the component X into Y and get the refs of X, but that is not working (the ref object is always null). Is there any other way where I can accomplish this?</p>