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.*
Following is my 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(
{this.state.errors[“name”]}
)
}
How would you describe: This.state = fields: The meaning is: .\n\nThis will be undefined in the first rendering of this.state.fields.name; fields as a blank object; and the input field as: value=undefined.\n\nBecause of that, the input field will be uncontrolled. When you enter any value in input fields are changed to: this.state = fields: ‘name: ’xyz’ .\n\nparaphrase: And then the input field is converted into a controlled component; that\’s why you are getting the error: .\n\nA component is changing control of an uncontrolled input of type text to control.\n\nParaphrase: How would you describe the fields in state: This.state = fields: ‘name: ’’ .\n\nShort-circuit evaluation like this: value property=this.state.fields.name || \’\’ // (undefined | | ) = .
