javascript - react load new content based on click -

i have 3 separate files.

nav.js

var navitem = react.createclass({   render: function() {     return (       <li><a href="#">{this.props.name}</a></li>     );   } });  var navlist = react.createclass({   render: function() {     var navnodes = this.props.data.map(function(nav) {       return (         <navitem name={nav.name} key={nav.id}></navitem>       );     });     return (       <ul classname="nav">         <li classname="current"><a href="#"><i classname="glyphicon glyphicon-home"></i> lists</a></li>         {navnodes}         <li><a href="#"><i classname="glyphicon glyphicon-plus"></i> add new widget list</a></li>       </ul>     );   } });  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 (       <div classname="col-md-2">         <div classname="sidebar content-box" style={{display: "block"}}>             <navlist data={this.state.data} />         </div>       </div>     );   } });  module.exports = {     navbox: navbox } 

content.js

var widgets = react.createclass({   getinitialstate: function() {     return {data: []};   },   componentdidmount: function() {     $.ajax({       url: 'http://server/api/widgets/?list="xxxx"&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"&format=json', status, err.tostring());       }.bind(this)     });   },   render: function() {     return (       <div classname="col-md-10">     <div classname="row">       <div classname="col-md-6">         <div classname="content-box-large">           <div classname="panel-body">               <bootstraptable data={this.state.data} striped={true}>                 <tableheadercolumn iskey={true} hidden={true} datafield="id">widget id</tableheadercolumn>                 <tableheadercolumn datafield="title">title</tableheadercolumn>                                 <tableheadercolumn datafield="username">username</tableheadercolumn>                 <tableheadercolumn datafield="price">price</tableheadercolumn>               </bootstraptable>               </div>             </div>           </div>         </div>       </div>     );   } });  module.exports = {     widgets: widgets } 

app.js

var navigation = require("./components/navigation/navigation"); var content = require("./components/content/content");  reactdom.render(    <navigation.navbox/>,     document.getelementbyid('navigation') );  reactdom.render(    <content.widgets/>,     document.getelementbyid('content') ); 

depending on link clicked in nav.js want update data in content.js. navitem in nav.js pass list name content.js (the "xxxx" table load specific data based on item.

as @fakerainbrigand mentions in comment, pretty typical use case type of event-based pattern flux.

https://facebook.github.io/flux/docs/overview.html

basically, want create type of singleton data store keeps track of list name. attach click handler navitem component causes change list name in store. store should emit change event in response changes. widgets component should listen changes on store, , when widgets component hears change on store, should make ajax request new list item.

let me know if have specific questions implementation.