javascript - stop automatic rendering on the screen in React -

i have 2 classes , 1 passing values another, have button in parent class should call function after content should displayed

the parent class this

import react 'react';

import reactdom 'react-dom'; //import donutchart 'react-donut-chart'; import proptypes 'prop-types'; import {display} './display.js'; import {donutchart} './donutchart.js'  class app extends react.component{   constructor(props){     super(props);     this.state={      text:0,      label:'',      value:'',      isclicked:false,      num:0,      ischecked:true,      list:[]     }     this.changetext=this.changetext.bind(this);     ///this.display=this.display.bind(this);     this.check=this.check.bind(this);   }    changetext(e){     this.setstate({       label:e.target.value,        })        }   display(){     var num=document.getelementbyid('number').value;      var text=parseint(num);     var label=document.getelementbyid('label').value;     this.setstate({       isclicked:true,       text:text,       label:''     })     }   check(){     var start_date=document.getelementbyid("start_date").value;     var end_date=document.getelementbyid("end_date").value;      console.log(typeof(start_date));     if(new date(start_date)>new date(end_date)){       alert("please enter valid dates");           this.setstate({             ischecked:false       })     }else{       this.setstate({         ischecked:true       })       this.display();     }    }   render(){     var listelements=[];     listelements.push(<donutchart data={this.state.text} label={this.state.label}/>);     return(       <div classname="row">         <div classname="col-md-6">           <input type="text" placeholder="enter name" id='label' onchange={this.changetext} value={this.state.label}/>            <input type='number' id='number'/>           <label>start date:<input type="date" id="start_date"/></label>           <label>end date:<input type="date" id="end_date"/></label>           <button onclick={this.check}>click here</button>         </div>         <div classname="col-md-6">           {listelements}            </div>       </div>       )    } }  app.proptypes={   text:proptypes.number,   num:proptypes.number }    reactdom.render(<app/>,document.getelementbyid('container')); 

and in donutchart class have

import react 'react'; import reactdom 'react-dom'; //import donutchart 'react-donut-chart'; import proptypes 'prop-types';  class donutchart extends react.component{   render(){      return(       <div>         <span>{this.props.label}</span>       </div>     )   } }   module.exports={     donutchart:donutchart } 

now, when type in input box gets automatically rendered on screen. , want displayed on click of button. don't understand concept of binding in react. please help.

i have same problem.. have used componentshouldupdate

your parent class:

import reactdom 'react-dom'; //import donutchart 'react-donut-chart'; import proptypes 'prop-types'; import {display} './display.js'; import {donutchart} './donutchart.js'  class app extends react.component{   constructor(props){     super(props);     this.state={      text:0,      label:'',      value:'',      isclicked:false,      num:0,      ischecked:true,      list:[],      updatecomponent: true //new field     }     this.changetext=this.changetext.bind(this);     ///this.display=this.display.bind(this);     this.check=this.check.bind(this);   }    componentdidmount(){ //added       this.setstate({updatecomponent:false})   }   changetext(e){     this.setstate({       label:e.target.value,        })        }   display(){     var num=document.getelementbyid('number').value;      var text=parseint(num);     var label=document.getelementbyid('label').value;     this.setstate({       isclicked:true,       text:text,       label:''     })     }   check(){     var start_date=document.getelementbyid("start_date").value;     var end_date=document.getelementbyid("end_date").value;      console.log(typeof(start_date));     if(new date(start_date)>new date(end_date)){       alert("please enter valid dates");           this.setstate({             ischecked:false       })     }else{       this.setstate({         ischecked:true       })       this.display();     }    }   render(){     var listelements=[];     // added `updatecomponent={this.state.updatecomponent}` rendering 'donutchart'     listelements.push(<donutchart updatecomponent={this.state.updatecomponent} data={this.state.text} label={this.state.label}/>);     return(       <div classname="row">         <div classname="col-md-6">           <input type="text" placeholder="enter name" id='label' onchange={this.changetext} value={this.state.label}/>            <input type='number' id='number'/>           <label>start date:<input type="date" id="start_date"/></label>           <label>end date:<input type="date" id="end_date"/></label>           <button onclick={this.check}>click here</button>         </div>         <div classname="col-md-6">           {listelements}            </div>       </div>       )    } }  app.proptypes={   text:proptypes.number,   num:proptypes.number }    reactdom.render(<app/>,document.getelementbyid('container')); 

your donutchart class:

import react 'react'; import reactdom 'react-dom'; //import donutchart 'react-donut-chart'; import proptypes 'prop-types';  class donutchart extends react.component{   componentshouldupdate(nextprops){ //added      return nextprops.updatecomponent          }   render(){      return(       <div>         <span>{this.props.label}</span>       </div>     )   } }   module.exports={     donutchart:donutchart }