title: Why isn't my input value updating with React?
body: <p>I have the following code in my component. It will get called when I update certain things, thereby replacing a bunch of things in the UI. Everything is updating EXCEPT the value of the input as seen by the user.</p>
  
  <pre><code>let input = {
    id: 'discount-' + geo + '-' + segment,
    value: percentage,
    disabled: applyToAll,
    placeholder: '0.00'
  };
  
  cells.push(
    &lt;td key={'cell-' + geo + '-' + segment} className="discount-segment cfix"&gt;
      &lt;Text {...input} /&gt;
    &lt;/td&gt;
  );
  </code></pre>
  
  <p>This is what <code>&lt;Text&gt;</code> returns, with things removed for clarity</p>
  
  <pre><code>return (
    &lt;div className={containerClasses.join(' ')} id={'field-container-' + id}&gt;
      {label}
      &lt;input
        autoComplete="off"
        type="text"
        id={id}
        ref="input"
        {...extraProps}
        name={id}
        className={classes.join(' ')}
        defaultValue={this.props.value}
        onChange={this.props.onChange}
        /&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>Everything renders fine. Let's say the <code>percentage</code> value is <code>5</code> on start, it will show <code>5</code> in the field. I then do something else that updates <code>percentage</code> to 50. (A console log will show the right number on re-render). However the value is only showing <code>5</code> in the UI still. I am using <code>defaultValue</code> on the input field, but I figure that should be changing as the whole thing re-renders from parent.</p>
  
  <p><strong>Edit</strong>
  Updated <code>&lt;Text&gt;</code> to set <code>value</code> instead of <code>defaultValue</code>. However then I need to use <code>state</code> to update the value when user types. Then when I re-render, I'm sending in new props with proper value, but of course props isn't updated. Catch-22 for me.</p>