javascript - Adding multiple divs or renders in ReactJs -

i'm having trouble in wanting create multiples of same html render in class. example, have div might this

[header goes here, input field] [dropdown] [textarea]

[submit]

[add field]

on add field, clone view , able add many again.

here's have far:

var updateform = react.createclass({      handlesubmit : function(e) {       e.preventdefault();     var title = react.finddomnode(this.refs.title).value.trim();     var date   = react.finddomnode(this.refs.date).value.trim();     var body  = react.finddomnode(this.refs.body).value.trim();        if(!title||!date || !body ) {         return;     }      this.props.onsubmit({title:title, date : date, body : body});          react.finddomnode(this.refs.title).value = '';         react.finddomnode(this.refs.date).value = '';         react.finddomnode(this.refs.body).value = '';         //react.finddomnode(this.refs.sub).value = '';      },      render: function() {      return(     <div id = "this want duplicate on each button click">         <form classname="form-horizontal" onsubmit={this.handlesubmit}>         <div class="form-control">         <label classname="col-sm-0 control-label ">title:</label>         <div class="col-sm-5">         <input classname = "form-control" type = "text" placeholder="title...." ref = "title"/>         </div>         </div>         <div class="form-control">         <label classname="col-sm-0 control-label ">date:</label>         <div class="col-sm-5">         <input classname = "form-control" type = "text" placeholder="date...." ref = "date"/>         </div>         </div>         <div classname="form">         <label htmlfor="body" classname="col-sm-0 control-label">report body:</label>         <div classname="column">         <textarea classname = "ckeditor" id = "ckedit"   ref = "body"></textarea>          </div>         </div>            <div class="form-group">         <label classname="col-sm-0 control-label"></label>         <div class="col-sm-5">         <input type = "submit" value="save changes" classname = "btn btn-primary" />         </div>         </div>         </form>      <div classname="btn-group">     <button type="button" classname="btn btn-danger">assign to</button>     <button type="button" classname="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">         <span classname="caret"></span>         <span classname="sr-only">toggle dropdown</span>     </button>     <ul classname="dropdown-menu">     {         this.props.forms.map(function(form){      return (     <li><a href ="#">{form}</a></li>     )})}     </ul>     <button classname="btn btn-success btn-block" onclick={this.addinputfield}>add subform</button>     </div>         </div> ); } }); 

what think need add:

adddiv: function(e) {         e.preventdefault();         //have array of divs?         //push same div it?         //then set state of array?      } 

i know in jquery write function appends markup whenever hit button, don't know how think here @ all.

i think want have button add header-date-body-component form, should submitted, right?

if need think more in components. have 1 component handles form. have 1 around handles adding other forms.

<reportdialog>   <reportform>   <reportform>   <button onclick={this.addreport}>add another</button> </reportdialog> 

to accomplish multiple reportforms need think data in component, reports (i assume). need state in reportdialog keeps track of reports. @ start of app have 1 report:

getinitialstate: function () {   return {     reports: [{ title: '', body: '', date: new date() }]   }; } 

so in addreport need change state , add report. have these reports rendered used map, time need loop on reports in component , return reportform each report.