Why is my code failing

I am working on the React Challenge at: freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-input. This is my code:

class ControlledInput extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      input: ''

    };

    // Change code below this line

    // 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.bind(this)} />

        { /* Change code above this line */}

        <h4>Controlled Input:</h4>

        <p>{this.state.input}</p>

      </div>

    );

  }

};

I fail the third and final test. Everything seems to be working with the code.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).


If you have a question about a specific challenge as it relates to your written code for that challenge, you can just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

The fact that there is nothing between “Change code below this line” and “Change code above this line” is a red flag.

Originally, I had:

    this.handleChange = this.handleChange.bind(this);

I deleted this line and built it into the html input element as shown in the hints section. Either way, it still fails the third test even though the p element seems to be showing the updating state.

Looking at the challenge, the next thing that jumps out at me is that the instructions say:

First, create a method called handleChange() that has a parameter called event .

But your handleChange() does not take a parameter.

Thanks! You solved my problem! Appreciate the help.

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