React-Mobx Warning: A component is changing an uncontrolled input

Question

I use React + TypeScript + Mobx. I made the form with input, everything is working, but the browser gives an error. What am I doing wrong?

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.

Form:

@observer
export class SearchForm extends React.Component {

    @observable
    private _inputText: string;

    submitForm = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    }

    render() {
      return (
        <form onSubmit={this.submitForm}>
          <InputField
            value={this._inputText}
            onChange={action((value: string) => this._inputText = value)}
          />
       </form>
    );}}

Input:

interface Props {
  value: string;
  onChange: (inputText: string) => void;
}

@observer
export class InputField extends React.Component<Props> {

  onChange = (event: SyntheticEvent<HTMLInputElement>) => {
  this.props.onChange(event.currentTarget.value);
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.value}
          onChange={this.onChange}
        />
     </div>
   );
 }
}

Your input is in fact controlled, so I don't see the problem. Maybe you have another input element somewhere in your code, that is not controlled? — Hinrich
– Hinrich, Commented Jun 6, 2018 at 8:43
Can you set up a plunkr, codepen, or similar to reproduce this problem? — Hinrich
– Hinrich, Commented Jun 6, 2018 at 9:29

noetix · Accepted Answer · 2020-02-22 04:15:17Z

4

React's inputs are controlled/uncontrolled based on the presence of the value prop on the input. You're passing the value prop, but _inputText starts as undefined. And when input's value starts undefined, React will always start the input in uncontrolled mode.

Once you type in the input, _inputText is no longer undefined, and the input flips to controlled mode, and you get the warning.

For your case, the fix is simple; just initialize _inputText to the empty string:

@observable
private _inputText: string = '';

You could also tweak your <InputField /> to force undefined value props to be the empty string:

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.value == null ? '' : this.props.value}
          onChange={this.onChange}
        />
     </div>
   );
 }

edited Feb 22, 2020 at 4:15

noetix

4,9533 gold badges29 silver badges48 bronze badges

answered Jun 6, 2018 at 13:51

adharris

3,6711 gold badge23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Mobx Warning: A component is changing an uncontrolled input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related