React-bootstrap: Warning: FormControl is changing

[delia-m]

I got a warning

warning.js?0260:36 Warning: FormControl 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. More info: https://fb.me/react-controlled-components

And I found a Formcontrol bring that warning

<FormControl 
  type="text"
    ref="accountName"
    placeholder="Account Name"
    value={_.get(this.props.user, 'account.name')}
    onChange={this.handleUpdate.bind(this, 'name')} />`

I realized if I use account.accountName instead of account.name for value
then warning disappear..
I just wonder the 'name' shouldn't be used props or state??
I can't tell it is a responsibility on react bootstrap or lodash actually..

Anybody have an idea..?

[taion]

Your value is toggling between undefined and a defined value. This isn't a React-Bootstrap thing.

[wzup]

@taion

Ok. and what do you suggest?
If there is no value initially, it is logically that it is undefined. Then it gets defined. Normal behavior. But throws warning. How to deal with it?

[jquense]

Set your initial value to an empty string. See the link in the warning from react