React – changing an uncontrolled input

React – changing an uncontrolled input

I have a simple react component with the form which I believe to have one controlled input:
import React from ‘react’;

export default class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {}
}

render() {
return (


)
}

onFieldChange(fieldName) {
return function (event) {
this.setState({[fieldName]: event.target.value});
}
}
}

export default MyForm;

When I run my application I get the following warning:

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

I believe my input is controlled since it has a value. I am wondering what am I doing wrong?
I am using React 15.1.0

Solutions/Answers:

Solution 1:

I believe my input is controlled since it has a value.

For an input to be controlled, its value must correspond to that of a state variable.

That condition is not initially met in your example because this.state.name is not initially set. Therefore, the input is initially uncontrolled. Once the onChange handler is triggered for the first time, this.state.name gets set. At that point, the above condition is satisfied and the input is considered to be controlled. This transition from uncontrolled to controlled produces the error seen above.

Related:  In AngularJS, how to detect when user leaves template/page?

By initializing this.state.name in the constructor:

e.g.

this.state = { name: '' };

the input will be controlled from the start, fixing the issue. See React Controlled Components for more examples.

Unrelated to this error, you should only have one default export. Your code above has two.

Solution 2:

When you first render your component, this.state.name isn’t set, so it evaluates to undefined, and you end up passing value={undefined} to your input.

When ReactDOM checks to see if a field is controlled, it checks to see if value != null (note that it’s !=, not !==), and since undefined == null in JavaScript, it decides that it’s uncontrolled.

So, when onFieldChange() is called, this.state.name is set to a string value, your input goes from being uncontrolled to being controlled.

If you do this.state = {name: ''} in your constructor, because '' != null, your input will have a value the whole time, and that message will go away.

Related:  Visualization of calendar events. Algorithm to layout events with maximum width

Solution 3:

Another approach it could be setting the default value inside your input, like this:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Solution 4:

I know others have answered this already. But one of the very important factor here that may help other people experiencing similar issue:

You must need to have onChange handler added in your input field (e.g. textField, checkbox, radio, etc). And always handle activity through the onChange handler, like:

<input ... onChange={ this.myChangeHandler} ... />

and when you are working with checkbox then you may need to handle its checked state with !! like:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

Reference: https://github.com/facebook/react/issues/6779#issuecomment-326314716

Solution 5:

One potential downside with setting the field value to “” (empty string) in the constructor is if the field is an optional field and is left unedited. Unless you do some massaging before posting your form, the field will be persisted to your data storage as an empty string instead of NULL.

Related:  How can I detect window size with jQuery?

This alternative will avoid empty strings:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

Solution 6:

When you use onChange={this.onFieldChange('name').bind(this)} in your input you must declare your state empty string as a value of property field.

incorrect way:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

correct way:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }