React - Create a Controlled Form

JavaScript
1

Tell us what’s happening: Can someone guide me and explain why my code won’t pass?

Describe your issue in detail here.

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.submit
});
    // 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/122.0.0.0 Safari/537.36

Challenge Information:

React - Create a Controlled Form

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

You are setting the submit state to the value of itself. You are supposed to set it to the value of the input state.

4

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