title: How to get refs from another component in React JS
body: <p>The code in main App component is as follows : </p>
  
  <pre><code>class App extends Component {
    componentDidMount(){
        console.log(this.ref);
        debugger;
    }
  
    render() {
  
      return (
          &lt;div&gt;
              &lt;Header/&gt;
              {this.props.children}
              &lt;Footer/&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And one of the components which renders with <code>{this.props.children}</code> is HomePage, where are sections with refs. </p>
  
  <p>The code of a HomePage is as follows :</p>
  
  <pre><code>render(){
       return (
          &lt;div className="homeMain"&gt;
              &lt;section ref="info"&gt; &lt;Info/&gt; &lt;/section&gt;
  
              &lt;section ref="contact"&gt; &lt;Contact /&gt; &lt;/section&gt;
         &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>How can I get those refs inside App component to be able to pass them as props to header?</p>
  
  <p>I'm trying to do it inside componentDidMount in App component, but <code>console.log(this.refs)</code> is empty.</p>
  
  <p>Any advice?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The whole App component : </p>
  
  <pre><code>import React, {Component} from 'react';
  import Footer from './common/footer';
  import Header from './common/header';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import * as actions from './components/homepage/login/authActions';
  
  class App extends Component {
      componentDidMount(){
          console.log(this.props.children.refs);
          debugger;
  
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Header route={this.props.location.pathname}
                          language={this.props.language.labels}
                          authenticated={this.props.authenticated}
                          signoutAction={this.props.actions}
                          offsets={this.props.offsets}
                  /&gt;
                  {React.cloneElement(this.props.children, {
                      currentLanguage: this.props.language.labels,
                      authenticated: this.props.authenticated
                  })}
                  &lt;div className="clearfix"/&gt;
                  &lt;Footer currentLanguage={this.props.language.labels}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state, ownProps) {
      return {
          language: state.language,
          authenticated: state.auth.authenticated,
          offsets: state.offsets
      };
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          actions: bindActionCreators(actions, dispatch)
      };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);
  </code></pre>