title: React - Form submit + set state
body: <p>in my to do list I'm having issues with the edit method. </p>
  
  <p>I have a form with an input and submit button, when you first submit the form everything works fine, however when you try to do it the second time it appears to refresh the page despite having preventDefault on the method.</p>
  
  <p>I tried removing the defaultValue but that didn't work.</p>
  
  <p>Edit method</p>
  
  <pre><code>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
      })
  }
  </code></pre>
  
  <p>Form</p>
  
  <pre><code>if(this.state.editing) {
      editingTemplate = (
          &lt;form onSubmit={this.editedData}&gt;
              &lt;input className="form-input" type="text" defaultValue={this.props.data.value} ref={ref =&gt; this.editedData = ref} /&gt;
              &lt;input type="submit" value="Save" /&gt;
          &lt;/form&gt;
      );
  }
  </code></pre>