React - "'value' prop on 'input' should not be null" for some input but not others

Question

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}) } 

Answer 1

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> )