title: React input - no default value
body: <p>I am so confused, I have no idea what is wrong. the default value does only <strong>sometimes</strong> show up, and sometimes when the default value shows up, if I press enter or click submit it results in being an empty string.</p>
  
  <p><strong>My Desired Outcome is:</strong> I want the input to show the default value, which is dueDateObject.dueDate. And then I want to be able to submit the input with the default value and have it being saved.</p>
  
  <p><strong>Problem</strong>::: Now when I save the default value, it sometimes saves it as an empty string.</p>
  
  <p>Thanks in advance :)</p>
  
  <pre><code>state = {
      editDueDateText: ''
  }
  </code></pre>
  
  <pre><code>onChangeEditDueDate = (event) =&gt; {
      this.setState({
        editDueDateText: event.target.value
      })
    }
  </code></pre>
  
  <pre><code>editDueDate = (e, keyName, dueDateObject) =&gt; {
      dueDateObject.showEditDate = false;
      this.props.editDueDate({ keyName, dueDateObject, editText: this.state.editDueDateText })
    }
  </code></pre>
  
  <pre><code> &lt;input className="form-control"
                onKeyDown={(e) =&gt; this.editDueDatekeypress(e, keyName, dueDateObject)}
                onChange={this.onChangeEditDueDate}
                value={this.state.editDueDateText}
                defaultValue={dueDateObject.dueDate}
                type="text"
                placeholder="By 28th May, I will have" /&gt;
              &lt;div className="input-group-append"&gt;
                &lt;button className="btn btn-outline-primary"
                  type="button"
                  onClick={(e) =&gt; this.editDueDate(e, keyName, dueDateObject)}&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
  </code></pre>