javascript - Input type text's value not getting updated while using React JS -

i using react js render input type="text". know if use value property react renders readonly textbox. so, wrote small component of own(see below).

react.createclass({     getinitialstate: function() {         var self = this;         return {value: self.renderdefault(self.props.value, '')};     },     handleonchange: function(event) {         this.setstate({value: event.target.value});          if (this.props.onchange){             this.props.onchange(event);         }     },     renderdefault : function(value, defaultvalue){         return typeof value !== 'undefined' ? value : defaultvalue;      },     render: function() {         var value = this.state.value;          return (<input type="text"                       size={this.renderdefault(this.props.size, 1)}                      value={value}                   onchange={this.handleonchange}                placeholder={this.renderdefault(this.props.placeholder, '')}                     />);     } }); 

every time try render component different value don't see component getting updated updated value.

everytime try render component different value don't see component getting updated updated value.

you mean running

<mycomponent value={somevalue} /> 

with different values?

if that's case, component not use new value because not telling to.

the component keeps state between rerenders , value shown in text field comes state. if don't update state based on new props, nothing change. have implement componentwillreceiveprops:

componentwillreceiveprops: function(nextprops) {     this.setstate({value: nextprops.value}); } 

from docs:

invoked when component receiving new props. method not called initial render.

use opportunity react prop transition before render() called updating state using this.setstate(). old props can accessed via this.props. calling this.setstate() within function not trigger additional render.

more lifecycle methods.