title: A component is changing an uncontrolled input of type text to be controlled error in ReactJS
body: <blockquote>
    <p>Warning: A component 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>Following is my code:</p>
  
  <pre><code>constructor(props) {
    super(props);
    this.state = {
      fields: {},
      errors: {}
    }
    this.onSubmit = this.onSubmit.bind(this);
  }
  
  ....
  
  onChange(field, e){
    let fields = this.state.fields;
    fields[field] = e.target.value;
    this.setState({fields});
  }
  
  ....
  
  render() {
    return(
      &lt;div className="form-group"&gt;
        &lt;input
          value={this.state.fields["name"]}
          onChange={this.onChange.bind(this, "name")}
          className="form-control"
          type="text"
          refs="name"
          placeholder="Name *"
        /&gt;
        &lt;span style={{color: "red"}}&gt;{this.state.errors["name"]}&lt;/span&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>