Accessing parent state in child in React : <p>I have (e.g.) two components in React. The first, <code>app.js</code>, is the root component. It imports some <code>JSON</code> data and puts it in its <code>state</code>. This works fine (I can see it in the React devtools).</p>

<pre><code>import data from '../data/docs.json';

class App extends Component {
  constructor() {
    super();
    this.state = {
      docs: {}
    };
  }
  componentWillMount() {
    this.setState({
      docs: data
    });
  }
  render() {
    return (
      &lt;Router history={hashHistory}&gt;
        &lt;Route path="/" component={Wrapper}&gt;
          &lt;IndexRoute component={Home} /&gt;
          &lt;Route path="/home" component={Home} /&gt;
          &lt;Route path="/docs" component={Docs} /&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;
    );
  }
}
</code></pre>

<p>The second, <code>docs.js</code>, is meant to show this <code>JSON</code> data. To do that it needs to access the <code>state</code> of <code>app.js</code>. At the moment it errors, and I know why (<code>this</code> does not include <code>app.js</code>). But how then can I pass the <code>state</code> from <code>app.js</code> to <code>docs.js</code>?</p>

<pre><code>class Docs extends React.Component {
    render() {
        return(
            &lt;div&gt;
                {this.state.docs.map(function(study, key) { 
                    return &lt;p&gt;Random text here&lt;/p&gt;; 
                })}
            &lt;/div&gt;
        )
    }
}
</code></pre>
