brownie3003 brownie3003 - 3 months ago 8
React JSX Question

Why am I switching from controlled to uncontrolled input in react

I'm not sure why I'm getting the switch from controlled to uncontrolled input warning.

this.state.lineItemName
is defined in my constructor which seems to be the main mistake from other SO questions I've read.

This is very similar to the todoMVC implementation for React.

class LineItemForm extends React.Component {
constructor(props) {
super(props);
this.state = {
newLineItem: ""
}
}

render() {
return(
<tr>
<td>
<input type="text"
onChange={this.handleChange.bind(this)}
onKeyDown={this.handleKeyDown.bind(this)}
value={this.state.newLineItem}
placeholder="Search for an item..."
autoFocus={true}
/>
</td>
</tr>
);
}

handleChange(e) {
this.setState({newLineItem: event.target.value});
}

handleKeyDown(e) {
if (e.keyCode === this.props.ENTER_KEY_CODE || e.keyCode === this.props.TAB_KEY_CODE) {
e.preventDefault();

let name = e.target.value.trim();

if (name) {
let lineItem = {
name: name
};
this.props.createLineItem(lineItem, this.props.sectionId)
this.setState({newLineItem: ""})
}
} else {
return;
}
}
}

LineItemForm.defaultProps = {
ENTER_KEY_CODE: 13,
TAB_KEY_CODE: 9
}

Answer

use

handleChange(event) { this.setState({newLineItem: event.target.value}); }

instead of

handleChange(e) {
    this.setState({newLineItem: event.target.value});
}