{"id":136,"hash":"dd3ceb98ae43c68f9fbe2e46e2ce83c7bacef0b810eeb7ea64522e51eae19111","pattern":"A component is changing an uncontrolled input of type text to be controlled error in ReactJS","full_message":"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.*\n\nFollowing is my code:\n\nconstructor(props) {\n  super(props);\n  this.state = {\n    fields: {},\n    errors: {}\n  }\n  this.onSubmit = this.onSubmit.bind(this);\n}\n\n....\n\nonChange(field, e){\n  let fields = this.state.fields;\n  fields[field] = e.target.value;\n  this.setState({fields});\n}\n\n....\n\nrender() {\n  return(\n    <div className=\"form-group\">\n      <input\n        value={this.state.fields[\"name\"]}\n        onChange={this.onChange.bind(this, \"name\")}\n        className=\"form-control\"\n        type=\"text\"\n        refs=\"name\"\n        placeholder=\"Name *\"\n      />\n      <span style={{color: \"red\"}}>{this.state.errors[\"name\"]}</span>\n    </div>\n  )\n}","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"The reason is, in state you defined:\n\nthis.state = { fields: {} }\n\nfields as a blank object, so during the first rendering this.state.fields.name will be undefined, and the input field will get its value as:\n\nvalue={undefined}\n\nBecause of that, the input field will become uncontrolled. \n\nOnce you enter any value in input, fields in state gets changed to:\n\nthis.state = { fields: {name: 'xyz'} }\n\nAnd at that time the input field gets converted into a controlled component; that's why you are getting the error:\n\n  A component is changing an uncontrolled input of type text to be\n  controlled.\n\nPossible Solutions:\n\n1- Define the fields in state as:\n\nthis.state = { fields: {name: ''} }\n\n2- Or define the value property by using Short-circuit evaluation like this:\n\nvalue={this.state.fields.name || ''}   // (undefined || '') = ''","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro","votes":906,"created_at":"2026-04-19T04:41:23.139631+00:00","updated_at":"2026-04-19T04:51:05.195482+00:00"}