Create a Controlled Form - MyForm should return a div element which contains a form and an h1 tag

JavaScript
1

Hi guys,

I have an issue with my code. The code works correctly but if I click on the button “Run the Tests” I have has warring: “MyForm should return a div element which contains a form and an h1 tag. The form should include an input and a button.”

I don’t know what is wrong.

Any idea?

Many thanks for review the code.

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) {
    event.preventDefault();
    this.setState({
        input: '',
        submit: this.state.input
        });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <h1>{this.state.submit}</h1>
          <button type='submit'>Submit!</button>
        </form>
        <input value={this.state.input} onChange ={this.handleChange}/>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

Link to the challenge:

2

Per the first challenge portion, the input has to be inside the form, or form must include it. I don’t know why they ask you to to put code at the bottom, but if you move the input into the form section, it works for me.

3

Well for a start:

handleSubmit(event) {
    event.preventDefault();
    this.setState({
        input: '',
        submit: this.state.input
        });

There are 2 things wrong with this

  1. there is no property state on the event object.
  2. there is a target property, but that returns a dom node

So throw a console.log statement like below, and check the event object. Look for target and you will see how to access it’s value*

*source is John Mendez i am only using this text as information to help others all credits go to him

also check the next" React: Create a Controlled Form this one is quite simulair to yours

4

Thanks for reply,

I moved input into form. It was the issue. I did not notice it.