Fix React Uncontrolled to Controlled Input Warning (2026)

The React Uncontrolled to Controlled Input warning means your input element is trying to manage its own state and have React manage its state simultaneously, which is a fundamental conflict.

Here are the common reasons why this happens and how to fix them:

1. Initial Value is `undefined` or `null`

Diagnosis: In your render method, check the initial value passed to the value prop of your input. If it’s undefined or null, React doesn’t know how to initialize a controlled input.

Fix: Ensure the value prop is always a string. If your state variable might be undefined initially, provide a default empty string.

// Instead of:
// <input value={this.state.inputValue} />
// If this.state.inputValue can be undefined
<input value={this.state.inputValue || ''} />

Why it works: React expects a controlled input’s value prop to be a string. Providing an empty string ensures React has a valid, controllable value to render from the start, even before the user types anything.

2. Mixing `defaultValue` and `value` Props

Diagnosis: You’re likely using both defaultValue and value on the same input element. defaultValue initializes the input but then relinquishes control, while value demands React’s control. This creates ambiguity.

Fix: Choose one. If you want React to control the input’s value, use value. If you want the input to have an initial value but be uncontrolled afterwards, use defaultValue.

// Incorrect:
// <input defaultValue="initial" value={this.state.inputValue} />

// Correct (controlled):
<input value={this.state.inputValue} onChange={this.handleChange} />

// Correct (uncontrolled with initial value):
<input defaultValue="initial" />

Why it works: By using only one of these props, you clearly define whether the input is managed by React (value) or by the DOM itself (defaultValue), resolving the conflict.

3. State Update Lags Behind Render

Diagnosis: Your onChange handler is not correctly updating the component’s state, or the state update is happening after the component has already re-rendered with the old value. This often occurs with asynchronous state updates or incorrect binding.

Fix: Ensure your onChange handler correctly calls setState and that the value prop is bound to that state. Use arrow functions or .bind(this) in the constructor for your event handlers.

class MyForm extends React.Component {
  state = { inputValue: '' };

  handleChange = (event) => {
    this.setState({ inputValue: event.target.value });
  };

  render() {
    return (
      <input
        type="text"
        value={this.state.inputValue}
        onChange={this.handleChange}
      />
    );
  }
}

Why it works: The handleChange function immediately updates this.state.inputValue with the new value from the input event. The subsequent re-render uses this updated state for the value prop, ensuring the input always reflects the component’s state.

4. Incorrect `event.target.value` Access

Diagnosis: In your onChange handler, you might be accessing event.target.value incorrectly. For example, if the event object is being manipulated or if the handler is called in a context where event.target is not the input element itself.

Fix: Log event.target.value inside your onChange handler to confirm it’s always the expected string. Ensure your handler is correctly attached to the onChange event of the input.

handleChange = (event) => {
  console.log('Current input value:', event.target.value); // Debugging line
  this.setState({ inputValue: event.target.value });
};

Why it works: This confirms that the event object is behaving as expected and that event.target.value is indeed capturing the user’s input correctly before it’s used to update the state.

5. Conditional Rendering of the Input

Diagnosis: If the input element itself is conditionally rendered, and its value prop is tied to a state that’s undefined or null before the input is mounted, React can get confused.

Fix: Similar to the first point, ensure that when the input is rendered, its value prop is always a valid string, even if it’s an empty one.

render() {
  const { showInput } = this.state;
  return (
    <div>
      <button onClick={() => this.setState({ showInput: !showInput })}>
        Toggle Input
      </button>
      {showInput && (
        <input
          type="text"
          value={this.state.inputValue || ''} // Ensure default empty string
          onChange={this.handleChange}
        />
      )}
    </div>
  );
}

Why it works: By providing a default empty string (|| '') to the value prop, you guarantee that the input is initialized with a controlled, valid value as soon as it’s mounted, preventing the warning.

6. Forgetting to Pass `onChange` to a Controlled Input

Diagnosis: You’ve set the value prop on an input, signifying you want it controlled by React, but you forgot to provide an onChange handler. React sees a value prop and expects a mechanism to update it, but there isn’t one.

Fix: Add an onChange handler to your input element that updates the component’s state.

// Incorrect:
// <input type="text" value={this.state.myValue} />

// Correct:
<input
  type="text"
  value={this.state.myValue}
  onChange={(e) => this.setState({ myValue: e.target.value })}
/>

Why it works: An onChange handler provides the necessary feedback loop for React to update the state whenever the user types, fulfilling the contract of a controlled input.

The next error you’ll likely encounter after fixing this is a Maximum update depth exceeded warning if your state updates are causing infinite re-renders, or a Cannot read properties of undefined (reading 'value') if your event handling logic is flawed.

1. Initial Value is undefined or null

2. Mixing defaultValue and value Props