Tell us what’s happening:
I’ve been able to figure out just about everything in FCC up until this point, whether from the lessons or from the forums if need be.
However, I honestly just have no idea what’s going on here. It’s probably the keyword “this” that is the clincher for me.
I just don’t understand what it’s referring to, and unfortunately, I can’t seem to find anything on the web that can explain it to me properly.
I bought a little react course on a separate site, since react is the only thing that’s causing me this problem, but honestly, I’ve built momentum with FCC and would just like to follow through.
Can someone please explain to me what is happening in this code? Like, I know line-by-line might be too much for everyone here, but literally, with the first ‘this’ on line 4 to the last ‘this’ on line 34, I just don’t get it.
I really have no idea what’s going on, for about the last 6 or so challenges …
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
});
// 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}></input>
{ /* 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_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-form