React: "Warning: Constructor is changing a uncontrolled input of type search to be controlled" since 15.0.1

Created on 12 Apr 2016  Â·  6Comments  Â·  Source: facebook/react

I noticed now react 15 complains for something like: https://jsfiddle.net/crl/8c6vngdy/3/ or https://jsfiddle.net/crl/8c6vngdy/1/ (just changing the initial state)

it stops complaining as soon as you put a string instead of undefined, is it intended? because I don't see a big problem and difference with a value being undefined

All 6 comments

Yes, this is intentional. value={undefined} makes the input uncontrolled. This means, for example, that resetting state to be undefined won’t clear it later, and this catches people by surprise. If you want the component to be controlled (and empty), please pass an empty string instead.

More about controlled and uncontrolled inputs: https://facebook.github.io/react/docs/forms.html#controlled-components

Thanks gaeron, good to know,

@gaearon I have the same issue. Wouldn't it make more sense to have a prop that says for instance controlled={true} and have the user explicitly set it (or have it by default true), instead of trying to infer it implicitly by a combination of some other props (value or onChange or ?)?

I am asking because this is causing some problems in my code. I needed the input to be controlled and have a value of undefined.

Thanks so much

I needed the input to be controlled and have a value of undefined.

What do you mean by “have a value of undefined”?
If this is input, using the value of '' should work great for you.

@gaearon I deleted my previous comment. I think this design choice (of having a component with an undefined value to be uncontrolled) is actually causing some issues for a bunch of people (see here https://github.com/facebook/react/issues/6222)

The problem is that using '' does not work because the input datatype could be a number, a date, or some object. When I'm saving data in my DB, having an empty string for a number/date/etc. datatype does not make sense, but undefined does.

It looks ok if undefined means uncontrolled input. Any reason doing same for null value?

Was this page helpful?
0 / 5 - 0 ratings