CODEWITHSUNDEEP
reactjs
skwidbreth
skwidbreth

Reputation: 8444

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

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

Upvotes: 63

Views: 115472

Answers (5)

apinanyogaratnam
apinanyogaratnam

Reputation: 708

In my case, I wanted the state to be null so I just changed the input's value slightly

<input value={someValue ?? ''} onChange={...} />

Upvotes: 3

Jitendra Rathor
Jitendra Rathor

Reputation: 686

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}/>;

Upvotes: 26

kojow7
kojow7

Reputation: 11404

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.

Upvotes: 0

skwidbreth
skwidbreth

Reputation: 8444

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

Upvotes: 46

Shubham Khatri
Shubham Khatri

Reputation: 281894

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

Upvotes: 8

Related Questions