In my React app (version 15.5.4), I am getting the following warning for an input field in one of my components:
Warning: 'value' prop on 'input' should not be null. Consider using the empty string to clear the component or 'undefined' for uncontrolled components.
referring to the following jsx:
<label>Description<br />
<input
type="text"
name="description"
value={this.state.group.description}
onChange={this.handleChange}
maxLength="99" />
</label>
But I am perplexed by this, because the value of this.state.group.description is set as "" in my constructor:
this.state = {
"group": {
"name": "",
"description": ""
}
}
and furthering my consternation is the fact that another input field refers to this.state.group.name, and yet no warning is thrown:
<label>Name *<br />
<input
type="text"
name="name"
value={this.state.group.name}
onChange={this.handleChange}
maxLength="99"
required="required"
autoFocus />
</label>
Am I missing something here? As far as I can tell, I've set up the initial state of these two values as empty strings and referred to them in the same way in the two input fields, yet one throws a warning and one does not.
It's not the end of the world... the app works fine, but I'd really like to understand why this is happening and get my app running clean.
Here's the handleChange:
handleChange(event) {
const attribute = event.target.name
const updatedGroup = this.state.group
updatedGroup[attribute] = event.target.value
this.setState({"group": updatedGroup})
}