How to get refs from another component in React JS
<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>