reactjs - How to clear a 'React boostrap-validation' form? -

i have form on page form submit button adding rows page - operation can done repeatedly before page closed

<div classname="panel-body line-items">      {/* line-item row each existing line item.  these update if typed in... */}      {this.state.lineitems.map( (li, index) =>          <lineitem key={index} item={li} } />      )}      {/* , line-item form can add one...*/}      <createlineitemform onsubmit={this.submitlineitem.bind(this)}/>  </div> 

the form looks this:

const createlineitemform = ({onsubmit}) => (     <form onvalidsubmit={onsubmit} classname="panel form-horizontal">         <div classname="line-item line-item-input-row">            <validatedinput type="text" name="summary"/>            $<validatedinput type="number" name="cost"/>            <button type="submit" id="createlineitem" classname="btn">               <i classname="fa fa-plus-square fa-lg"/></button>         </div>     </form> ) 

submitlineitem() on form adds line item defined summary , cost inputs this.state, causes re-render new line item appearing in line-items panel.

this works way want, except form input fields ("summary" , "cost") not cleared when hit button. means inputs contain "duplicate" of newly created line item row, after first row has been entered.

how can clear these form fields (either part of submitlineitem() or other way)?

<form> , <validatedinput> come react-bootstrap-validation.

if find repeating grouping of code on , on again, that's candidate component. why not break

<div key={index}>     <input type="text" name={"lineitem"+index} value={li.summary} onchange={this.onlineitemdescriptionchange.bind(this, index)}/>    $<input type="number" step="0.01" wrapperclassname="line-item-cost" name={"lineitemcost"+index} value={li.cost} onchange={this.onlineitemvaluechange.bind(this, index)}/> </div> 

for example:

   react.createclass({      getinitialstate() {        return {         somestate: true        }      }      render() {       return (         <div key={index}>          <input type="text" name={"lineitem"+index} value={li.summary} onchange={this.onlineitemdescriptionchange.bind(this, index)}/>          $<input type="number" step="0.01" wrapperclassname="line-item-cost" name={"lineitemcost"+index} value={li.cost}         onchange={this.onlineitemvaluechange.bind(this, index)}/>         </div>       )      }    }) 

if you're looking reset state of form holds data, in creation handler. you'd want assign button or gets clicked, if possible. can listen return keyup believe.

function handlecreatenewlineitem(e) {   e.preventdefault() // if using form element   // update state   this.setstate({      li.cost: 0,      li.summary: ''   }) } 

into component, give either default props or initial state, , when create new 1 it'll empty/cleared?