Could you tell me what the difference between “value = {this.state.input}” and "onChange = {this.handleChange}?
as you see, “value ={this.state.input}” passes a value of {this.state.input} to input element, and {this.handleChange} turns out to be{this.state.input} too, cause hanleChange is a function, which returns the value of input, so what is the difference? Am I right?
**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
this.setState({
submit: this.state.input
})
event.preventDefault()
// 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
Challenge: Create a Controlled Form
Link to the challenge: