ReactJS - how a child access it's parent's props?
<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>