javascript - Component get duplicated content instead of refreshing -

i'm reviewing reactjs, following tutorial @ https://facebook.github.io/react/docs/tutorial.html , when playing example run weird behavior. problem content of 1 element (the comment) doesn't refreshed . instead duplicates new data.

see working fiddle @ http://jsfiddle.net/l0xy4jqa/2/

what's wrong?

code:

/* html */ <script src="http://fb.me/react-js-fiddle-integration.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <div id="content"></div>  /* js */ var data = [         {author:"mr. raspa pan", color:"darkblue", text: "- content"},         {author:"mrs. pasa sa", color:"darkgreen", text: "- *other* content"},         {author:"mrs. rata tan", color:"brown", text: "- __more__ content"},         {author:"mr. aspa spa", color:"deeppink", text: "- code like:  `for (;true;) {lv(u)}`"}         ];  var data2 = [         {"author":"mrs. raspa pan pan", "color":"blue", "text": ">- *chaged* content"},         {"author":"mrs. pasa sa sa", "color":"green", "text": ">- *other* __changed__ content"},         {"author":"mr. rata tan tan", "color":"red", "text": ">- __more__ **changed** content"},         {"author":"mr. aspa spa spa", "color":"pink", "text": ">- code like: `with (you) { lv(this); }`"}       ];  var comment = react.createclass({   render: function (){     var markdown = marked(this.props.children.tostring(), {sanitize: true});      return(       <div classname="comment" style={{border: "1px solid orange", padding: "5px"}}>         hello, world! comment from:         <h2 classname="commentauthor" style={{color: this.props.color, border: "1px solid purple", margin: "0"}}>           {this.props.author}         </h2> //this line below has problem: should <div classname="commentcontent" ... in order hold <p> returned marked         <p classname="commentcontent" dangerouslysetinnerhtml={{__html: markdown}} />       </div>     );   } });  var commentlist = react.createclass({   render: function(){     var commentnodes = this.props.data.map(function (comment,i){ return(         <comment key={i} author={comment.author} color={comment.color}>{comment.text}</comment>);         }       );     return (       <div classname="commentlist" style={{border: "1px dashed blue", padding: "5px"}}>         hello, world! commentlist. , have comments:         {commentnodes}       </div>     );   } });  var commentbox = react.createclass({   getinitialstate: function(){     return {data: this.props.data};   },   componentdidmount: function () {      var o = this;     settimeout(function(){         o.setstate({data: data2});     },2000);         },   render: function() {     return (       <div classname="commentbox" style={{color: "grey", border: "1px solid red", padding: "5px"}}>         hello, world! commentbox , have list of comments.         <commentlist data={this.state.data}/>       </div>     );   } });  react.render(   <commentbox data={data} url="comments.json"/>,   document.getelementbyid('content') ); 

the problem marked library returns formatted strings inside <p> element. colliding jsx <p> container. browser tries fix nested paragraph splitting them, causing react lose reference content. i'm editing question point line issue.

so guys, careful dangerouslysetinnerhtml param.