javascript – React – changing an uncontrolled input

The Question :

392 people think this question is useful

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 (
<input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
</form>
)
}

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

543 people think this answer is useful

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.

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.

139 people think this answer is useful

When you first render your component, this.state.name isn’t set, so it evaluates to undefined or null, and you end up passing value={undefined} or value={null}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.

54 people think this answer is useful

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)}/>



19 people think this answer is useful

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

You must have an onChange handler added in your input field (e.g. textField, checkbox, radio, etc). Always handle activity through the onChange handler.

Example:

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



When you are working with checkbox you may need to handle its checked state with !!.

Example:

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



14 people think this answer is useful

Simple solution to resolve this problem is to set an empty value by default :

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />



7 people think this answer is useful

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.

This alternative will avoid empty strings:

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

...

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



7 people think this answer is useful

In my case, I was missing something really trivial.

<input value={state.myObject.inputValue} />

My state was the following when I was getting the warning:

state = {
myObject: undefined
}



By alternating my state to reference the input of my value, my issue was solved:

state = {
myObject: {
inputValue: ''
}
}



6 people think this answer is useful

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
}



4 people think this answer is useful

Set a value to ‘name’ property in initial state.

this.state={ name:''};


3 people think this answer is useful

If the props on your component was passed as a state, put a default value for your input tags

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>



3 people think this answer is useful

An update for this. For React Hooks use const [name, setName] = useState(" ")

1 people think this answer is useful

This generally happens only when you are not controlling the value of the filed when the application started and after some event or some function fired or the state changed, you are now trying to control the value in input field.

This transition of not having control over the input and then having control over it is what causes the issue to happen in the first place.

The best way to avoid this is by declaring some value for the input in the constructor of the component. So that the input element has value from the start of the application.

0 people think this answer is useful

For dynamically setting state properties for form inputs and keeping them controlled you could do something like this:

const inputs = [
{ name: 'email', type: 'email', placeholder: "Enter your email"},
]

class Form extends Component {
constructor(props){
super(props)
this.state = {} // Notice no explicit state is set in the constructor
}

handleChange = (e) => {
const { name, value } = e.target;

this.setState({
[name]: value
}
}

handleSubmit = (e) => {
// do something
}

render() {
<form onSubmit={(e) => handleSubmit(e)}>
{ inputs.length ?
inputs.map(input => {
const { name, placeholder, type } = input;
const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string

return <input key={name}  type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
}) :
null
}
<button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
</form>
}
}



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