ReactJS: Prettiest way to dynamically load Component within Modal

Question

I want to create a clean & reusable Modal-component like so:

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 keep it neat — I'd would like to load the modal-content as a Component based on the {this.props.module} value, that is coming from the initiator component.

Is there a better way of doing this? Something like <{this.props.module}/>? Or is this insecure? Maybe there's is already something in ReactJS built-in?

Answer 1

You can use this.props.children to render component's child controls. 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>;
    }
});