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

Tags:

Reactjs