title: ReactJS - how a child access it's parent's props?
body: <p>How can a child access its parent's props? For instance,</p>
  
  <p>A parent component - footer.jsx:</p>
  
  <pre><code>import React from 'react';
  import $ from 'jquery';
  
  import NavItem from './nav-item';
  
  class Footer extends React.Component
  {
      constructor(props) {
          super(props);
          this.state = {
              publicUrl: null,
              currentUrl: null,
              navitems: [],
          };
      }
  
      // Then fetch the data using $.getJSON():
      componentDidMount() {
          this.serverRequest = $.getJSON(this.props.source, function (result) {
              this.setState({
                  currentUrl: window.location.href,
                  publicUrl: result.publicUrl,
                  navitems: result.nav
              });
          }.bind(this));
      }
  
      componentWillUnmount() {
          this.serverRequest.abort();
      }
  
      render() {
          var loop = this.state.navitems.map(function(item, index){
              return &lt;NavItem key={index} item={item}&gt;&lt;/NavItem&gt;;
          });
  
          return (
              &lt;div&gt;
                  &lt;div className="nav"&gt;
                      &lt;ul&gt;{ loop }&lt;/ul&gt;
                      &lt;p&gt;{this.state.publicUrl}&lt;/p&gt;
                      &lt;p&gt;{this.state.currentUrl}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export { Footer as default }
  </code></pre>
  
  <p>A child component - nav-item.jsx:</p>
  
  <p>import React from 'react';</p>
  
  <pre><code>class NavItem extends React.Component
  {
      constructor(props) {
          super(props);
      }
  
      render() {
          return &lt;li&gt;&lt;a href={this.props.publicUrl + '/' + this.props.item.url}&gt;{this.props.item.title}&lt;/a&gt;&lt;/li&gt;
      }
  }
  
  export { NavItem as default }
  </code></pre>
  
  <p>results in <code>footer.jsx</code> (parent):</p>
  
  <pre><code>this.props.publicUrl // http://my-website.com
  </code></pre>
  
  <p>results in <code>nav-item.jsx</code> (child):</p>
  
  <pre><code>this.props.publicUrl // undefined but it should be http://my-website.com
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>Sample data:</p>
  
  <pre><code>{
      "publicUrl": "http:\/\/my-website.com",
      "nav": [{
          "navId": "3",
          "title": "Home
          "code": "home
          "href": null,
          "style": null,
          "sort": "3",
          "url": "home
          "parentId": null,
          "totalChildren": "0",
          "createdOn": null,
          "updatedOn": null
      }, {
          "navId": "4",
          "title": "About
          "code": "about
          "href": null,
          "style": null,
          "sort": "4",
          "url": "about
          "parentId": null,
          "totalChildren": "0",
          "createdOn": null,
          "updatedOn": null
      }, {
          "navId": "5",
          "title": "Contact",
          "code": "contact",
          "href": "#contact",
          "style": null,
          "sort": "5",
          "url": "contact",
          "parentId": null,
          "totalChildren": "0",
          "createdOn": null,
          "updatedOn": null
      }]
  }
  </code></pre>