title: Accessing parent state in child in React
body: <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>