javascript - Using a function in the render state in ReactJS to append a div to another -

i messing around , creating comment tree structure, works out fine except when want creating collapsing , expanding commenting trees. far display well, displayed on webpage in proper tree structure, reddit, want build in collapse , expand comments , subcomments feature. have idea of using jquery appending div finished rendering. comes mind when think is:

         var childdiv = "#" + comment._id;          var parentdiv = "#" + comment.pcomment;            $(parentdiv).append(childdiv); 

this idea of appending divs together, pcomment holds parentcomments id, , establish divs id of mapped/rendered. issue how tell render function want @ end of each render mapping. map comment @ time, , create div there, cant map div if isnt there, , lost. tried out idea making onclick function , worked out great, append on each mapping, , @ end of after div rendered, appends div's in correct order. think there's alot of differents way go i'm not sure how.

render : function() {       return(             <div>           <ul classname = "list-unstyled">           {           this.props.comments.map(function(comment) {             return(               //right here want append div.             <div id = {comment._id}>             <div classname = "usercomments">             //content             </div>             </div>             )               })             }               </ul>               </div>          )     } 

generally goal create parent div, , append div holds children.

i've tried doing var x = $(parentdiv).append(childdiv); , proceeded call {x} in between div append it. parent case, pcomment defaulted id root, every comment owned comment after has 'pcomment' value held owners id.

however doing

uncaught error: invariant violation: traverseallchildren(...): encountered invalid child; dom elements not valid children of react components. 

instead of thinking collapsing (v) think setting state collapsed (adj). when user clicks expand / hide, set boolean. in render function, check boolean.

something this:

react.createclass({   getinitialstate: function () {     return { hidden: false }    },    render: function () {     return (<div class={ this.state.hidden && 'hidden' } onclick={ this.toggle }>       { this.props.children }     </div>)   },    toggle: function (ev) {     this.setstate({ hidden: !this.state.hidden })   }, }) 

and in css:

.hidden div { display: none; } 

edit: how append divs

stop thinking in verbs. don't want append (v) divs, want divs either present (adj) or absent (adj). can use boolean, or whatever conditional you'd like:

render: function () {   return (<div>{ this.state.wewantdivs && this.renderdivs() }</div>) } 

edit: how put child view in parent view

put child elements in parent element.

render: function () {   return <parent><child></child></parent> } 

and in parent element render special children property.

var parent = react.createclass({   render: function () {     return <div>{ this.props.children }</div>   } })