Input Elements Should Not Switch From ReactJs Controlled to Uncontrolled Error

Question

I am trying to handle changes in my form. I have a name, description and category.

First entry (name) → Unable to enter field.

The second input (description) → The ability to enter a field, but the result is undefined.

Third input (DDL category) → It is not possible to change the selected category, but the selected one is displayed by default in my alret as "drink";

Problem:

AddDeal changes the controlled input of text of a type that should be uncontrolled. Input elements should not switch with uncontrolled (or vice versa). Decide using an uncontrolled input element for component lifetime.

I looked through a reactive document here on controlled components, but it's hard for me to understand, since I'm new to it.

https://facebook.imtqy.com/react/docs/forms.html#controlled-components

Here is my code for AddDeal.js

 export default class AddDeal extends React.Component { constructor(props) { super(props); // Set the state this.state = { title: '', description: '', category: 'technology' }; this.onSubmit = this.onSubmit.bind(this); this.handleChange = this.handleChange.bind(this); } onSubmit(e) { e.preventDefault(); alert('Title is: ' + this.state.title + 'Description is: ' + this.state.description + 'Category is: ' + this.state.category); } handleChange(e) { this.setState({ title: e.target.title, description: e.target.description, category: e.target.value }); } render() { return ( <div> <h1>Add Deal</h1> <form onSubmit={this.onSubmit}> <label><input value={this.state.title} onChange={this.handleChange} type="text" name="title"/></label> <label><input value={this.state.description} onChange={this.handleChange} type="text" name="description" /></label> <select value={this.state.category} onChange={this.handleChange}> <option value="technology">Technology</option> <option value="food">Food</option> <option value="drink">Drink</option> <option value="books">Books</option> </select> <input type="submit" value="Submit"/> </form> </div> ); } } 

Why is it so hard to capture entrances? Should I use props instead of state? Thanks.

Answer 1

The problem is in the onChange function , you are using the general onChange function, so instead of updating everyone with the same value, update the specific state value.

Use this function:

 handleChange(e) { this.setState({ [e.target.name] : e.target.value }); } 

Use the name property to update a specific state , and you need to define name='category' with a select box.

Check out the working example:

 class AddDeal extends React.Component { constructor(props) { super(props); // Set the state this.state = { title: '', description: '', category: 'technology' }; this.onSubmit = this.onSubmit.bind(this); this.handleChange = this.handleChange.bind(this); } onSubmit(e) { e.preventDefault(); alert('Title is: ' + this.state.title + 'Description is: ' + this.state.description + 'Category is: ' + this.state.category); } handleChange(e) { this.setState({ [e.target.name] : e.target.value }); } render() { return ( <div> <h1>Add Deal</h1> <form onSubmit={this.onSubmit}> <label><input value={this.state.title} onChange={this.handleChange} type="text" name="title"/></label> <label><input value={this.state.description} onChange={this.handleChange} type="text" name="description" /></label> <select name='category' value={this.state.category} onChange={this.handleChange}> <option value="technology">Technology</option> <option value="food">Food</option> <option value="drink">Drink</option> <option value="books">Books</option> </select> <input type="submit" value="Submit"/> </form> </div> ); } } ReactDOM.render(<AddDeal/>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/> 

Answer 2

change your function to

  handleChange(e) { this.setState({ [e.target.name] : e.target.value }); }