React - "'value' prop on 'input' should not be null" for some input but not others
Thanks to @ShubhamKhatri and @Dekel for pointing me in the right direction on this - I hadn't even considered the fact that the empty string set in the constructor was being overwritten with a problematic value. It turns out that the source of the issue was that after setting the value of description
as an empty string, my API was overwriting it with null
.
I resolved this by tweaking my render
method like so:
let groupDescription;
if (!this.state.group.description) {
groupDescription = ""
} else {
groupDescription = this.state.group.description
}
return (
<label>Description<br />
<input
type="text"
name="description"
value={groupDescription}
onChange={this.handleChange}
maxLength="99" />
</label>
)
The problem lies in the handleChange function, you are mutaing the state directly
const updatedGroup = this.state.group
updatedGroup[attribute] = event.target.value
Use spread operator
to do a clone of the group object
handleChange(event) {
const attribute = event.target.name
const updatedGroup = [...this.state.group]
updatedGroup[attribute] = event.target.value
this.setState({"group": updatedGroup})
}
If the value as null then react 15 through the same error. So it's better the default props 'value' of an input should be an empty string in order to run react js code without warning.
<input type="text" value={value || ''}/>;