reactjs - How to render a react component on every button click? -

iam creating react app in want render component on every button click.but once.

class addform extends react.component{ constructor(props){   super(props);   this.state={     anotherform:false,   }   this.newform=this.newform.bind(this); } newform(){   this.setstate({     anotherform:true   }) } render(){ return(   <div>     <button onclick={this.newform}>addform</button>     <educationdetails/>     {this.state.anotherform?<educationdetails/>:null}   </div> ) } } 

here component educationdetails rendered whenever addform button clicked.but couldn't figure out.

here working jsfiddle

lets assume education details component.

 class educationdetails extends react.component {       constructor(props) {         super(props);       }        render() {         return (<div>              <p>firstname: <input type="text" value={this.props.value || ''} /></p>                <p>lastname:  <input type="text" value={this.props.value || ''} /></p>               </div>         );       }     } 

in addform component, have count , whenever click add more button increment count , display education detail form based on count state.

class addform extends react.component {    constructor(props) {             super(props);             this.state = {value: [], count: 1}; //initial you'll have 1 form           }            addmore(){             this.setstate({count: this.state.count+1})//on click add more forms           }            displayform(){              let forms = [];              for(let = 0; < this.state.count; i++){                        forms.push(                        <div key={i}>                            <educationdetails value={this.state.value[i] || ''} />                        </div>                     )              }              return forms || null;           }            render() {             return (               <form >                   {this.displayform()}                           <input type='button' value='add more' onclick={this.addmore.bind(this)}/>               </form>             );           }         }          reactdom.render(<addform />, document.getelementbyid('container')); 

you remove form using same concept decrement count

removeclick(){       this.setstate({count: this.state.count - 1})   } 

and under add more button, add button remove

<input type='button' value='remove' onclick={this.removeclick.bind(this)}/>