react: Warn when input's value is null
Passing null indicates that the user tried to specify a value (eg. from the database) but didn’t notice the value was null; seems like that should be a warning. Normally we treat null and undefined as the same, but in this case passing null indicates an error and should therefore be discouraged. The user should decide if they want an uncontrolled component (in which case they should pass undefined) or if they want an empty controlled component (in which case they should pass the empty string).
@spicyj said he would be fine with this being a warning and/or with treating null as an empty string. Making it an error/warning has the advantage that there is now an easy upgrade path (fix the warning) without us introducing subtle changes in behavior that will break people’s apps.
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Comments: 17 (11 by maintainers)
Commits related to this issue
- dont try to default field values to null (see facebook/react#5013) — committed to musicglue/react-form-component by leemhenson 8 years ago
- Set value to an empty string in case the date is nil This change in React https://github.com/facebook/react/issues/5013 causes the warning message if the value of an input is null. — committed to asok/reagent-forms by asok 8 years ago
- Set value to an empty string in case the date is nil This change in React https://github.com/facebook/react/issues/5013 causes the warning message if the value of an input is null. — committed to asok/reagent-forms by asok 8 years ago
- Set value to an empty string in case the date is nil This change in React https://github.com/facebook/react/issues/5013 causes the warning message if the value of an input is null. — committed to asok/reagent-forms by asok 8 years ago
- Set value to an empty string in case the date is nil (#115) This change in React https://github.com/facebook/react/issues/5013 causes the warning message if the value of an input is null. — committed to reagent-project/reagent-forms by asok 8 years ago
So… why is this a thing?
nullis a perfectly acceptable initial value. For example, when creating a new object (initialized w/ default values from the server then passed to the component as props) in a form that requires address, Address Line 2 is often optional. I’m perfectly aware that it’snull, and I may or may not add a value to it when completing the form.I do the suggested workaround
<input value={foo || ''} onChange={this.handleChange} />, but it just seems hackey. From what I can tell on v15.6.1, the only issue this causes is the console warning. I know I can just ignore the warning, but it’s distracting when debugging actual errors.I think the first post is a bit misleading.
There’s no problem with null as a value. The problem is React treats this as a flag to make an input uncontrolled. That turned out to be confusing.
So we added a warning to discourage existing users from passing null. This lets us safely change the behavior for future version to treat null as an empty string. We haven’t done this yet but that’s the plan, if I understand it right.
Maybe now is a good time to do this. Do you mind raising a new issue to discuss?
However we solve this issue, I really want to have a less hacky way of passing
value={null}to a controlled input.