Tell us what’s happening:
The help section doesn’t contain a solution…this one worked for me. There was an “unexpected character” on line 8 when writing out the handleChange() method. It wanted a ; instead of a { until I inverted the method and the binding (counter-intuitive following previous challenges).
Your code so far
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
// change code below this line
this.handleChange = this.handleChange.bind(this);
// change code above this line
}
// change code below this line
handleChange(event) {
this.setState({
input: event.target.value
});
}
// change code above this line
render() {
return (
<div>
{ /* change code below this line */}
<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>
{ /* change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.
I think these two lines are unnecessary:
// change code below this line
this.handleChange = this.handleChange.bind(this);
// change code above this line
This lesson requires two sections of modifications while there are three, I was a bit confused at first.
I was over-binding, perhaps. This lesson was very hard to understand. I wrote the function first on my own and it was fine but when I erased it I couldn’t get it to work again so I went for the solution that wasn’t there. But even the code straight from the hints would work in the browser- it rejected my bracket until i just flip-flopped them like in the next challenge
render() {
return (
<div>
{ /* change code below this line */}
<input value = {this.state.input} onChange = {this.handleChange}/>
{ /* change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
So I guess we don’t need to put () after {this.handleChange}/>?
This cert started off easy but I don’t seem to be retaining it as well.
No. The function will be called by onChange.
You could also write {() => this.handleChange()} (used when you need to pass arguments to handler function).
And unfortunately these lessons are already a bit outdated.
what do I do with Build error, open your browser console to learn more.?
It usually happens when everything looks ok. I don’t know what to look for in the DevTools
The devTools just give you a very similar error, the fCC console would have (it is just not set up to give all the errors). So, once you open up the devTools, navigate to the console tab, and you should find an error providing useful information:
