javascript - React - Form submit + set state -

in list i'm having issues edit method.

i have form input , submit button, when first submit form works fine, when try second time appears refresh page despite having preventdefault on method.

i tried removing defaultvalue didn't work.

edit method

editeddata(e) {     e.preventdefault();     let editedvalue = this.editeddata.value;     let objectkey = this.props.data.key;     let userid = firebase.auth().currentuser.uid;     let dbref = firebase.database().ref(`users/${userid}/notes/${objectkey}`);     dbref.update({         value: editedvalue     })     this.setstate({         editing: false     }) } 

form

if(this.state.editing) {     editingtemplate = (         <form onsubmit={this.editeddata}>             <input classname="form-input" type="text" defaultvalue={this.props.data.value} ref={ref => this.editeddata = ref} />             <input type="submit" value="save" />         </form>     ); } 

you using this.editeddata method , ref object variable overwrite function object reference. here have changed this.editeddata1 can data. try let me know if have issues.

if(this.state.editing) {     editingtemplate = (         <form onsubmit={this.editeddata}>             <input classname="form-input" type="text" defaultvalue={this.props.data.value} ref={ref => this.editeddata1 = ref} />             <input type="submit" value="save" />         </form>     ); }  editeddata = (e) => {   e.preventdefault();   let editedvalue = this.editeddata1.value;   let objectkey = this.props.data.key;   let userid = firebase.auth().currentuser.uid;   let dbref = firebase.database().ref(`users/${userid}/notes/${objectkey}`);   dbref.update({     value: editedvalue   })   this.setstate({       editing: false   }) }