Create a Controlled Form Error- React

JavaScript
#1

Tell us what’s happening:
Hi guys, I’m working on one of the React challenges. My code completes most of the requirements but the “h1 header should render the value of the submit field from the component’s state.” is not working .

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: this.state.input
});
    // change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          { /* change code below this line */ }
<input 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36.

Link to the challenge:

#2

you sholud move h1 inside the form because form is linked to the onSubmit event. try to move your h1 just before the input for example:)

#3

Per the instructions, “Finally, create an h1 tag after the form which renders the submit value from the component’s state” meaning you are correct in having the h1 tag outside of the form I think. I had the exact same issue, my h1 tag before I had a space between the h1 tags and the brackets. Try removing that space so that there is no white space surrounding {this.state.submit}

1 Like
#4

Yes the problem is within the space between h1 and the caller

<h1>{this.state.submit}</h1>
#5

what?
h1 tag will gonna just contain submit value .
there is single reason that affect to h1 tag. at all

#6

I faced this problem a while ago and yeah, it’s the whitespace on the h1 tag

#7

that’s the answer I am looking for. I did all the requirements the challenge needs but the white space preventing me from passing the challenge. well done!.

#8

Wouldn’t this be considered a bug with freeCodeCamp itself? The code does complete the objectives. Or is white space technically invalid for React here?

#9