reactjs - Passing an element vs. a react class to an optionally displayed modal -

i have table cell user can click on launch react-bootstrap modal displays additional details. modal displays component has own state , may trigger action pull data back-end if store doesn't have data needs.

currently i'm passing component react element react-bootstrap's overlaymixin show details in modal i'm wondering if instead should passing react class , rendering react.createelement.

current code:

var mycell = react.creatclass({     _renderdetails: function () { return (<details id={this.props.id}/>);       render: function() {         return (             <td>                 <mymodal modal={this._renderdetails()}>                     {this.props.value}                 </mymodal>             </td>         );      } });  var mymodal = react.createclass({     props: { content: react.proptypes.element.isrequired }     mixins: [overlaymixin],      // called overlaymixin when component mounted or updated.     renderoverlay: function() {         if (!this.state.ismodalopen) { return (<span/>); }         return (             <modal classname='information-modal' onrequesthide={this.handletoggle}>                 <div classname='modal-body'>                     {this.props.modal}                 </div>             </modal>         );     } }); 

the reason ask question because looking @ griddle's documentation appear passing react class instead.

var linkcomponent = react.createclass({     render: function() { return <a href ... </a> }  }); var columnmeta = [ { "customcomponent": linkcomponent }; 

and rendering using react.createelement. source code

var coldata = (<meta.customcomponent data= ... />; returnvalue = <td>{coldata}</td>);  // turns var coldata = react.createelement(meta.customcomponent, {data: ... returnvalue = react.createelement("td" ... coldata)); 

since griddle uses customcomponent property render each item in column, must reactcomponent class, otherwise render exact same component each row. said way, customcomponent represents template create new reactelement from. (i prefer able pass function receives appropriate properties , returns reactelement.)

in case, need specify single component, passing reactelement makes sense. it's more powerful end-user perspective, because can create component wired parent. common pattern when using this.props.children.