ReactJS: the most convenient way to dynamically load a component in Modal

Question

I want to create a clean and reusable Modal component, for example:

var Modal = React.createClass({ .... render: function() { return ( <div className={ this.state.className }> <div className="modal-opacity" onClick={this.toggle}></div> <section className="modal-content"> <a className="close" onClick={this.toggle}><img src="/images/icon-close.svg" alt="Close" /></a> <div> {this.props.module === 'curriculum' ? <Curriculum /> : <Contact /> } </div> </section> </div> ); 

To be neat; I would like to load modal-content as a component based on the value of {this.props.module} , which comes from the initiating component.

Is there a better way to do this? Something like <{this.props.module}/> ? Or is it unsafe? Maybe ReactJS already has something?

Answer 1

You can use this.props.children to render the children of a component. Like this:

 var Control = React.createClass({ render: function() { return <div>{ this.props.children }</div>; } }); var App = React.createClass({ render: function() { return <Control><h1>child control</h1></Control>; } });