title: ReactJs Create Reusable component with multiple different children
body: <p>I am new to React and am trying to get up to speed on a few basic concepts, trying to shoehorn it into an existing application (with the intention of slowly converting the entire app into React). So this may be a vary basic question.</p>
  
  <p>I am converting my dialogs first (my app has a bunch of bootstrap modal dialogs), so I am using <a href="https://github.com/rackt/react-modal" rel="nofollow">react-modal</a> library to create these dialogs. What I would like to do is make the outer markup for this dialog reusable across all my dialogs. For instance, with this render method:</p>
  
  <pre><code>render() {
          return(
              &lt;Modal
                  className="Modal__Bootstrap modal-dialog"
                  closeTimeoutMS={150}
                  isOpen={this.state.modalIsOpen}
                  onRequestClose={this.handleModalCloseRequest}
              &gt;
                  &lt;div className="modal-content"&gt;
                      &lt;div className="modal-header"&gt;
                          &lt;button type="button" className="close" onClick={this.handleModalCloseRequest}&gt;
                              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                              &lt;span className="sr-only"&gt;Close&lt;/span&gt;
                          &lt;/button&gt;
  *******INSERT HEADER COMPONENT*******
                      &lt;/div&gt;
                      &lt;div className="modal-body"&gt;
  *******INSERT BODY COMPONENT*******    
                      &lt;/div&gt;
                      &lt;div className="modal-footer"&gt;
                          &lt;button type="button" className="btn btn-default" onClick={this.handleModalCloseRequest}&gt;Cancel&lt;/button&gt;
  
  *******INSERT ADDITIONAL FOOTER BUTTONS COMPONENT*******
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Modal&gt;
          );
      }
  </code></pre>
  
  <p>I would like to have the lines that start with the ******** to be variable components that are appropriate (and different) for each dialog.</p>
  
  <p>Obviously, for each dialog, I could just copy and paste this render method into that dialog's class and have hard coded components for that dialog. Something like (for the body):</p>
  
  <pre><code>                    &lt;div className="modal-body"&gt;
                          &lt;DialogABody /&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>                    &lt;div className="modal-body"&gt;
                          &lt;DialogBBody /&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>But if I do that, I am then duplicating all the markup for the dialog "chrome" in react.</p>
  
  <p>Essentially, I need some sort of dynamic component?</p>
  
  <p>Is this possible?</p>