Tests failing with Create a Controlled Form

JavaScript
1

It seems like I’ve completed the assignment correctly, but the code is saying that I am failing the tests with the handleSubmit function. I’ve double checked and I can’t find anything wrong.

  **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: state.input
  })
  // Change code above this line
}
render() {
  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        {/* Change code below this line */}
        <input onChange = {this.handleChange} value={this.state.input} />
        {/* Change code above this line */}
        <button type='submit' onSubmit = {this.handleSubmit}>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 (X11; Ubuntu; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0

Challenge: Create a Controlled Form

Link to the challenge:

2

Hello,

in the handleSubmit you are missing the this when setting the state value. You need to access this.state.input (so you need to apply same logic you are using in the render method when accessing the state values).

1 Like
3

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