React resize change components
<p>I have a React App where I have an event listener for resize event on the window object.</p>

<pre><code>class App extends React.Component {
  constructor(props){
    super(props);

    this.state = { width: 0 }
    this.setSize = this.setSize.bind(this);
  }

  render() {
    let content = this.state.width &lt; 600 ? &lt;MobileComponent/&gt; : &lt;DesktopComponent /&gt;;
    return(&lt;div&gt;{content}&lt;/div&gt;)
  }

  setSize() {
    this.setState({
        width: window.innerWidth
    });
  }

  componentDidMount() {
    this.setSize();
    window.addEventListener('resize', this.setSize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setSize);
  }
}
</code></pre>

<p>This thing work but my problem is that I dont know how to access the state of the App component (the window width) inside child components.</p>

<p>So, can someone explain me how to access/send this.state.width in my children components (i know i can send with props, but what if in my  I have 2 more components?)</p>