How to reload input value in React / Javascript with Virtual DOM? -

i have problem reload input value.

<input type="email" ref="email" id="email" value={this.props.handlingagent.email}/> 

after use

this.props.handlingagent.email = "asd" 

in debugger value of this.props.handlingagent.email asd, in input still old value. how refresh value without jquery? shouldn't refresh automatically?

first, props what's been passed onto you. view them function parameters. child shouldn't go modify them since breaks whatever assumption parent has , makes ui inconsistent.

here, since prop's passed onto you, want handler parent can call notify change:

var app = react.createclass({   getinitialstate: function() {     return {inputvalue: ''};   },    handlechange: function(value) {     console.log('value gotten child: ' + value);     this.setstate({       inputvalue: value     });   },    render: function() {     return <field onchange={this.handlechange} inputvalue={this.state.inputvalue} />;   } });  var field = react.createclass({   handlechange: function(event) {     // make sure parent passes onchange prop     // see did here? it's not actual dom onchange. we're manually     // triggering based on real onchange fired `input`     this.props.onchange(event.target.value);   },    render: function() {     // named value prop `inputvalue` avoid confusion. can     // see `onchange`, it'd nicer name `value`     return <input value={this.props.inputvalue} onchange={this.handlechange} />;   } }); 

so yes, refresh "automatically", if tell parent change. instead of modifying what's been passed onto you, use vanilla callbacks parent passing new value. flushes down same value (or different, if fits) down you.