With a lot of prompting from the system, reviewing of the hints, and copying of look-a-like code, I was able to get it to run. One thing I noticed is that the end of hint 2 says to “set ‘input’ to an empty string.” I explicitly added a null string, but the solution does not seem to reset the input. Please explain this to me.
**Your code so far**
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) {
// Change code below this line
event.preventDefault()
this.setState({
submit: this.state.input,
input: ''
});
// Change code above this line
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
{/* Change code below this line */}
<input value = {this.state.input} onChange = {this.handleChange}/>
{/* Change code above this line */}
<button type='submit'>Submit!</button>
</form>
{/* Change code below this line */}
<h1>{this.state.submit}</h1>
{/* Change code above this line */}
</div>
);
}
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: React - Create a Controlled Form
Link to the challenge: