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

Viewed 60232

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

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 == null ? '' : value}/>;

I received this error when I hadn't yet added an onChange event handler to the select element.

I was just doing an initial test to see how the element looked before adding the onChange event. Unfortunately, I spent too much time trying to figure this out when it wasn't an issue to begin with. The one thing I am not sure of is why it would be reporting it as null rather than "" when an onChange event isn't specified.

Related