title: Input field needs to both controlled and uncontrolled
body: <p>I have an input field which is rendered like this:</p>
  
  <pre><code>class InputSection extends Component {
      constructor(props) {
          super(props);
          this.onChange = this.onChange.bind(this);
      }
  
      handleChange(event) {
          this.props.onChange(event.target.name, event.target.value);
      }
  
      render() {
          return (
              &lt;input type="text"
                  name="topicInputText"
                  value={this.props.formValues['topicInputText']}
                  onChange={this.props.onChange}
              /&gt;
          );
      }
  }
  </code></pre>
  
  <p>There are two (perceived) reasons why I have <code>value</code> bound to an entry of the <code>this.props.formValues</code> object:</p>
  
  <ol>
  <li>I need to pass in a default value</li>
  <li>I need the ability to reset the input field when the users clicks on a "reset" button. This reset button triggers a redux action which leads to a change in the <code>formValues</code> object passed-in as a prop</li>
  </ol>
  
  <p>The <code>onChange</code> event handler, which is handled up the component chain, triggers a redux action which updates the store state that drives the <code>formValues</code> object passed-in as a prop.</p>
  
  <p>But when I type into the input field using the keyboard I get this console warning:</p>
  
  <blockquote>
    <p>Warning: InputSection is changing an uncontrolled input of type text
    to be controlled. Input elements should not switch from uncontrolled
    to controlled (or vice versa). Decide between using a controlled or
    uncontrolled input element for the lifetime of the component.</p>
  </blockquote>
  
  <p>I suppose this is because my input component is being "managed" (since I'm binding it's <code>value</code>). But, if I can't bind it's <code>value</code> how do I set it's initial value or reset the value at a later time?</p>