Hi
I am currently following the React course and so far completed the challenges without much problems. But at the challenge “Create a Controlled Form” I got stuck. I completed the assignment as laid out in the instruction and also the test objectives… the functionality is working fine just as instructed. But the test fails at “Typing in the input
element should update the input
property of the component’s state.”
However, when I manually do just that, it works fine. I am honestly out of ideas what may be wrong here. I did not change IDs, names, other elements out of the scope of the assignment etc.
Any help? Is this a bug?
Here is the code:
Code of the challenge
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
submit: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
handleSubmit(event) {
event.preventDefault()
this.setState({
submit: this.state.input
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" onChange={this.handleChange} />
<button type='submit'>Submit!</button>
</form>
<p>{this.state.input}</p>
<h1>{this.state.submit}</h1>
</div>
);
}
};