ControlledInput Working but failing test

Tell us what’s happening:
Hi there

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

Challenge: Create a Controlled Input

Link to the challenge:

1 Like

Hey andrew,

you forgot to have an event parameter in your handleChange function. Your code worked with this handleChange code snippet:

handleChange(e) {
    this.setState({
      input: e.target.value
    });
  }

best
Dennis

Thanks Dennis

Weird that it worked anyway though, but it passes now.

Thanks again. Much appreciated.

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:

fcc

Hi jsdisco,

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.

best
Dennis

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.