title: Create dynamic components from collection
body: <p>I am trying to create components from a collection:</p>
  
  <pre><code>    var sections = [
         {name: 'EditStudentBasicDetails',key: 1, title: 'Basic Details', sectionData: this.state.studentData.activeData.basicDetails},
          {name: 'EditStudentAgentsInfo', key: 2, label: 'Agents Info', sectionData: this.state.studentData.activeData.agentsInfo },
  </code></pre>
  
  <p>Can I create the following components by mapping the above collection?</p>
  
  <pre><code>    &lt;Tabs activeKey={this.state.activeTabId} onSelect={this.handleSelect} bsStyle="tabs"&gt;
           &lt;Tab eventKey={1} title="Basic Details"  &gt;
                &lt;EditDetails studentId={this.state.studentId} sectionData={this.state.studentData.activeData.basicDetails} /&gt;
          &lt;/Tab&gt;
          &lt;Tab eventKey={2} title="Agents Info"&gt;
              &lt;EditMoreDetails studentId={this.state.studentId} sectionData={this.state.studentData.activeData.agentsInfo} /&gt;
          &lt;/Tab&gt;
  </code></pre>
  
  <p>How would I create the component 'EditMoreDetails' for example using the `map?</p>
  
  <p>Something like this?</p>
  
  <pre><code>{this.sections.map(function(section) {
                      return  &lt;Tab key={key} title={title}  &gt;
                                  &lt;{name} sectionData={this.state.studentData.activeData.basicDetails} /&gt;
                              &lt;/Tab&gt;;
  })}
  </code></pre>