reactjs - Ho to access new props.value before render function in React life cycle -


all:

if define component have property called "value",

var child = react.createclass({   componentwillreceiveprops: function(){      console.log("componentwillreceiveprops",this.props.value);   },   shouldcomponentupdate : function(){     console.log("shouldcomponentupdate", this.props.value);     return true;   },   componentwillupdate : function(){     console.log("componentwillupdate", this.props.value);   },   componentdidupdate: function(){     console.log("componentdidupdate", this.props.value);   },   render: function(){     return (       <div>the value generated parent: {this.props.value}</div>     );   } }); 

if want give newly set props.value state.value( or maybe prepare value transition/interpolation ), stages before render have previous value. could show me how new value before render?

thanks

componentwillreceiveprops called when component receives new props.

from here can update component's state using setstate without triggering render.

  1. you can access new props first argument passed componentwillreceiveprops
  2. you can access old props this.props

from example:

componentwillreceiveprops: function(nextprops){     console.log("componentwillreceiveprops", nextprops.value, this.props.value); }, 

jsbin demo


Comments