Home » Reactjs » React – changing an uncontrolled input

React – changing an uncontrolled input

Posted by: admin November 30, 2017 Leave a comment


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) {
        this.state = {}

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>

    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


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:


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.


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.


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


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