title: React - changing an uncontrolled input
body: <p>I have a simple react component with the form which I believe to have one controlled input:</p>
  
  <pre><code>import React from 'react';
  
  export default class MyForm extends React.Component {
      constructor(props) {
          super(props);
          this.state = {}
      }
  
      render() {
          return (
              &lt;form className="add-support-staff-form"&gt;
                  &lt;input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/&gt;
              &lt;/form&gt;
          )
      }
  
      onFieldChange(fieldName) {
          return function (event) {
              this.setState({[fieldName]: event.target.value});
          }
      }
  }
  
  export default MyForm;
  </code></pre>
  
  <p>When I run my application I get the following warning:</p>
  
  <blockquote>
    <p>Warning: MyForm 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 believe my input is controlled since it has a value.  I am wondering what am I doing wrong?</p>
  
  <p>I am using React <strong>15.1.0</strong></p>