Https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-form

*Tell us what’s happening:
The last test: - The h1 header should render the value of the submit field from the component’s state. -is failing even though I have rendered the value of submit field in the h1 header after the form component.

Please check the code I have written.

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((state)=>({submit:state.input}));
// Change code above this line
}
render() {
return (

    <form onSubmit={this.handleSubmit}>
      {/* Change code below this line */}
{/* Change code above this line */} Submit! {/* Change code below this line */}

{this.state.submit}

{/* Change code above this line */}
); } }

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((state)=>({submit:state.input}));
  // 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 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0.

Challenge: Create a Controlled Form

Link to the challenge:

I think the tests are failing because you’ve got spaces around the value. When I removed them it passed challenge.

Thank you so much it worked.