Create a Controlled Form works but does not pass

Create a Controlled Form works but does not pass
0

#1

Tell us what’s happening:
Everything works just fine. in the window. I type something in the form, I hit submit, and an h1 header shows up with what I typed.

But, when I run the tests, I always get:
// running test
The h1 header should render the value of the submit field from the component’s state.
// tests completed

I’ve tried it in chrome and firefox on linux, and chrome, firefox and opera on Windows. Every time I get the same result. Every time, clicking submit causes the appropriate h1 header to show up, but every time the results say that it is not rendering.

Am I missing something?

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
    this.setState({submit: this.state.input});
    event.preventDefault();
    // change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          { /* change code below this line */ }
          <input type="text" value={this.state.input} onChange={this.handleChange} />
          { /* change code above this line */ }
          <button type='submit'>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:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-form/


#2

No, you didn’t miss anything.

Looks like you created space between h1 tags and javascript. Make sure there is no space.

I know, these tests are pretty picky.


#3

Thank you! I pored over it for almost an hour last night. I don’t think I ever would have thought it had anything to do with that. But getting rid of the spaces works.

Thanks again.