As far as I can tell, my code does everything required. It updates the state and the < p > tag. Yet the test fails. Any suggestions? Am I doing something stupid?
Thanks
**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() {
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} />
{ /* Change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
**Your browser information:**
User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0
I have some fuzzy memory that the event variable is automatically made a global variable on the browser window object, see screenshot. event is marked with strike-through because I never declared it anywhere, yet it’s not undefined when I try to log it:
you are not wrong, there is this a global event variable and indeed the solution as suggested by andrew does work.
But using the global event variable is not recommended. Actually, it is even deprecated which you notice through the strike-through.
You quite often encounter features that are “deprecated” while programming. This is often a way to inform users of a framework or library that a particular feature should not be used and will be removed in the future.
I assume the freeCodeCamp team was aware of that and wrote a smart test that made sure you do not use the deprecated global event variable.