title: react load new content based on click
body: <p>I have three separate files.</p>
  
  <p>Nav.js</p>
  
  <pre><code>var NavItem = React.createClass({
    render: function() {
      return (
        &lt;li&gt;&lt;a href="#"&gt;{this.props.name}&lt;/a&gt;&lt;/li&gt;
      );
    }
  });
  
  var NavList = React.createClass({
    render: function() {
      var navNodes = this.props.data.map(function(nav) {
        return (
          &lt;NavItem name={nav.name} key={nav.id}&gt;&lt;/NavItem&gt;
        );
      });
      return (
        &lt;ul className="nav"&gt;
          &lt;li className="current"&gt;&lt;a href="#"&gt;&lt;i className="glyphicon glyphicon-home"&gt;&lt;/i&gt; Lists&lt;/a&gt;&lt;/li&gt;
          {navNodes}
          &lt;li&gt;&lt;a href="#"&gt;&lt;i className="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Add New Widget List&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      );
    }
  });
  
  var NavBox= React.createClass({
    loadNavsFromServer: function() {
      $.ajax({
        url: "http://server/api/widgetlists/?format=json",
        dataType: 'json',
        cache: false,
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error("http://server/api/widgetlists/?format=json", status, err.toString());
        }.bind(this)
      });
    },
    getInitialState: function() {
      return {data: []};
    },
    componentDidMount: function() {
      this.loadNavsFromServer();
    },
    render: function() {
      return (
        &lt;div className="col-md-2"&gt;
          &lt;div className="sidebar content-box" style={{display: "block"}}&gt;
              &lt;NavList data={this.state.data} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = {
      NavBox: NavBox
  }
  </code></pre>
  
  <p>Content.js</p>
  
  <pre><code>var Widgets = React.createClass({
    getInitialState: function() {
      return {data: []};
    },
    componentDidMount: function() {
      $.ajax({
        url: 'http://server/api/widgets/?list="xxxx"&amp;format=json',
        dataType: 'json',
        cache: false,
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error('http://server/api/widgets/?list="xxxx"&amp;format=json', status, err.toString());
        }.bind(this)
      });
    },
    render: function() {
      return (
        &lt;div className="col-md-10"&gt;
      &lt;div className="row"&gt;
        &lt;div className="col-md-6"&gt;
          &lt;div className="content-box-large"&gt;
            &lt;div className="panel-body"&gt;
                &lt;BootstrapTable data={this.state.data} striped={true}&gt;
                  &lt;TableHeaderColumn isKey={true} hidden={true} dataField="id"&gt;Widget ID&lt;/TableHeaderColumn&gt;
                  &lt;TableHeaderColumn dataField="title"&gt;Title&lt;/TableHeaderColumn&gt;                
                  &lt;TableHeaderColumn dataField="username"&gt;Username&lt;/TableHeaderColumn&gt;
                  &lt;TableHeaderColumn dataField="price"&gt;Price&lt;/TableHeaderColumn&gt;
                &lt;/BootstrapTable&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = {
      Widgets: Widgets
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>var Navigation = require("./components/Navigation/Navigation");
  var Content = require("./components/Content/Content");
  
  ReactDOM.render(
     &lt;Navigation.NavBox/&gt;,
      document.getElementById('navigation')
  );
  
  ReactDOM.render(
     &lt;Content.Widgets/&gt;,
      document.getElementById('content')
  );
  </code></pre>
  
  <p>Depending on what link is clicked in Nav.js I want it to update the data in Content.js.  NavItem in Nav.js would pass the list name into Content.js (the "xxxx" so that the table would load with the specific data based on that Item.</p>