title: Keep getting a controlled vs uncontrolled react error
body: <p>I keep getting this error in my console:</p>
  
  <blockquote>
    <p>warning.js?8a56:36 Warning: LoginForm is changing a controlled input
    of type password to be uncontrolled. Input elements should not switch
    from controlled to uncontrolled (or vice versa). Decide between using
    a controlled or uncontrolled input element for the lifetime of the
    component. More info: <a href="https://facebook.github.io/react/docs/forms.html#controlled-components" rel="nofollow noreferrer">https://facebook.github.io/react/docs/forms.html#controlled-components</a></p>
  </blockquote>
  
  <p>I have had a look at these questions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/37175048/how-to-create-a-controlled-input-with-empty-default-in-react-15">How to create a controlled input with empty default in React 15</a> - I define my state already</li>
  <li><a href="https://stackoverflow.com/questions/36586835/react-controlled-vs-uncontrolled-inputs">React Controlled vs Uncontrolled inputs</a> - My function takes an event and not a password parameter</li>
  <li><a href="https://stackoverflow.com/questions/37427508/react-changing-an-uncontrolled-input">React - changing an uncontrolled input</a> - I already define the password as empty</li>
  </ul>
  
  <p>Here is the component:</p>
  
  <pre><code>export default class LoginForm extends Component {
    constructor(props) {
      super(props);
      this.state = {
        values: {
          username: "",
          password: ""
        }
      };
  
      this.onChange = this.onChange.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
      this._clearInput = this._clearInput.bind(this);
    }
  
    onSubmit(event) {
      // this.props.attemptLogin
      event.preventDefault();
      console.log(this.state.values);
      let {username, password} = this.state.values;
  
      this.props.attemptLogin(username, password)
      .then((userInfo) =&gt; {
        console.log(userInfo);
        LocalStore.setJson('api', userInfo.api);
        LocalStore.setJson('user', userInfo.user);
  
        this._clearInput('username' , 'password');
  
      })
      .catch((err) =&gt; {
        console.log("Failed:");
        console.log(err);
        this._clearInput('password');
      });
    }
  
    _clearInput(...fields) {
      let newValuesState = {};
      fields.forEach((field) =&gt; {
        newValuesState[field] = '';
      });
      this.setState({values: newValuesState});
    }
  
    onChange(event) {
      let name = event.target.name;
      let value = event.target.value;
      this.setState({values: {[name]: value}});
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;form method="post" onSubmit={this.onSubmit}&gt;
            &lt;div&gt;&lt;input type="text" name="username" onChange={this.onChange} value={this.state.values.username}/&gt;&lt;/div&gt;
            &lt;div&gt;&lt;input type="password" name="password" onChange={this.onChange} value={this.state.values.password}/&gt;&lt;/div&gt;
            &lt;div&gt;&lt;button type="submit"&gt;Login&lt;/button&gt;&lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  LoginForm.propTypes = {
    attemptLogin: React.PropTypes.func.isRequired
  };
  </code></pre>
  
  <p>The code does seem to work but this error pops up in the console and so I can't continue I till I get it to stop appearing. Can anyone see what's I did wrong in the component?</p>