Categories
javascript reactjs

ReactJS – Warning: A component is changing an uncontrolled input of type text to be controlled

I am trying to get rid off this error message, but still unsuccessfully.

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

There’s also link to the Facebook page, but I am still not sure how to figure it out.

class EditItem extends Component {
constructor(props) {
super(props);
this.state = {items: ''};
this.addItemService = new ItemService();
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount(){
axios.get('http://localhost:3005/items/edit/'+this.props.match.params.id)
.then(response => {
this.setState({ items: response.data });
})
.catch(function (error) {
console.log(error);
})
}
handleChange = (e) => {
let items = Object.assign({}, this.state.items); //creating copy of object
items.item = e.target.value; //updating value
this.setState({items});
}
handleSubmit(event) {
event.preventDefault(); // not sure why this
this.addItemService.updateData(this.state.items.item, this.props.match.params.id); // service for updating the data
this.props.history.push('/index'); // redirect
}
render() {
return (
<div className="container">
<form onSubmit={this.handleSubmit}>
<label>
Edit Item:
<input type="text" value={this.state.items.item} className="form-control" onChange={this.handleChange}/>
</label><br/>
<input type="submit" value="Update" className="btn btn-primary"/>
</form>
</div>
);
}
}

In the input seems to be always a not-null value, how do I fix this?