javascript - Re-rendering a ReactJS component hangs browser -

i've been experimenting creating component based ui using reactjs, versus usual slapdash approach of million global functions, variables , non-reusable markup. far react i've hit stumbling block.

consider following component layout

eventview   eventviewsidebar     eventviewlist       eventviewlistrow   eventviewdetail 

in layout, multiple occurrences of eventviewlistrow present each unique key. clicking instance of eventviewlistrow should update eventviewdetail details of item.

this render function top level eventview component:

render: function () {     return (       <div classname="event-view row-fluid">            <div classname="event-view__sidebar col-md-4">             <eventviewsidebar projectid={this.state.projectid} />           </div>            <div classname="event-view__content col-md-8" id="eventdetail">            </div>        </div>     ); } 

and eventviewdetail component

var eventviewdetail = react.createclass({      getinitialstate: function () {         return { eventid: 0 };     },      render: function () {         if (this.state.eventid === 0) {             return (<h3>nothing selected</h3>);         }         else {             return (           <div>               {this.state.eventid}           </div>           );         }     } }); 

for updating of eventviewdetail when eventviewlistrow clicked, have following event handler defined in eventviewlistrow

handleclick: function (event) {      event.preventdefault();      react.render(             react.createelement(eventviewdetail, { eventid: this.props.id }),               document.getelementbyid("eventdetail")             ).setstate({ eventid: this.props.id });  }, 

this seems working fine (with exception of setstate call above had add otherwise clicking different eventviewlistrow didn't seem have effect - no doubt that's first problem). actual critical problem if add default html eventdetail div defined in eventview when click link in eventviewlistrow, following message displayed in console , browser hangs.

warning: react attempted reuse markup in container checksum invalid. means using server rendering , markup generated on server not client expecting. react injected new markup compensate works have lost many of benefits of server rendering. instead, figure out why markup being generated different on client or server:

(client) <h3 data-reactid=".0">nothing selected

(server) <h3 data-reactid=".0.1.0">select

once browser tab (chrome 43) has hung, have terminate using task manager.

originally, calling instance of eventviewdetail directly, example

          <div classname="event-view__content col-md-8" id="eventdetail">             <eventviewdetail />           </div> 

but hangs if use vanilla html

          <div classname="event-view__content col-md-8" id="eventdetail">             <h3>select event view</h3>           </div> 

clearly i'm doing wrong, i'm unfamiliar react don't know is. read i'm suppose have state on top level eventview component, don't have access , react doesn't seem offer ability go component chain. unless supposed pass eventview instance property each child component?

oh, should add - tried removing setstate call eventviewlistrow click handler in case cause, had no effect.

can offer advice on i'm doing wrong. should eventview have state child components, , if so, how reference parent nested child component - have pass instance of eventview prop every single child?

sorry if these idiot questions!

you should not call react.render in handleclick function. call this.setstate , react automatically render again.