How submit button properties work

What is a search term for the h1 attributes? h1 accepts this.state.submit. That seems funny. The words on a submit button accept the new state. One would think that would belong on the button.


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.stateSet({submit: event.target.value});
  // 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 submit={this.state.submit}></h1>
      {/* Change code above this line */}
    </div>
  );
}
}
/*
<p>"I should be able to finish two modules in a day." Expectation disproven. I  usualy do half of one module in a day in React.</p>
<p>For the love of history, I am getting farther away from the answer. The visuals have become hidden.</p>
<p>Input element takes this.state.input.</p>
<p>Outside the form is the text, h1. Text should be inside the form as it is part of the input. What is going on?</p>
<p>h1 also takes this.state.input. No, h1 is the text not in the field but on the button and it takes this.state.submit.</p>
<code>
<button type="submit">Submit!</button>
<h1 input={this.state.submit}></h1>
</code>
<p>Does button not have a value attribute?</p>
<p>Where does event.preventDefault() belong? This line belongs in the function that uses the parameter it uses, the handleSubmit function for state changes.</p>
<p>onSubmit handles the change. h1, according to the hints, accepts the value of submit. Please explain the value of submit to me.</p>
<p></p>
<p></p>
*/
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36 Edg/89.0.774.50.

Challenge: Create a Controlled Form

Link to the challenge:

The value of the submit property can change to fit the instructions. Value will be the state of input from handleChange.

handleSubmit(event) {
  // Change code below this line
  event.preventDefault();
  this.stateSet({submit: this.state.input});
  // Change code above this line
}

I have been looking for a bug or typo, because this code is failing the last two tests. Let me know if an error can be spotted.

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.stateSet({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>
    );
  }
}
```
  1. Typo

what you have

  this.stateSet({submit: event.target.value});

should be:

  this.setState({submit: event.target.value});

you have a typo here, you should be able to see this error logged out in your browser console when you invoke handleSubmit function


  1. Failing Test - Submitting the form should run handleSubmit which should set the submit property in state equal to the current input.

what you have:

  this.stateSet({submit: event.target.value});

Should be:

  this.setState({submit: this.state.input});

event.target.value is undefined on submitting form event. Use the state.input you have set in handleChange for the input value


  1. Failing test - The h1 header should render the value of the submit field from the component’s state.

what you have:

      <h1 submit={this.state.submit}></h1>

Should be:

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

What you did was setting the h1 element’s attribute submit as this.state.submit. But you are not using that attribute here and it is not valid. The test asks you to render the value of the h1 element, so just place this.state.submit as text and it will pass


Complete code that passes all tests

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>
  );
}
}

You took the time to clearly show corrections for each mistake.
Earlier, h1 was corrected from using submit as an attribute to using the submit state as content. It had been hard to know what the h1 element was. Once the program ran correctly, it was easy to see that h1 is not part of the button element, but some text under the form that displays what was submitted.

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

Nice work. Whole solutions are placed between spoiler tags. This will blur code from those who are not ready to read a full answer. The blur is removed by clicking on the code.

Hey, hey! :flushed:

Our answers are the same. Attached at the bottom are some comments made when composing.

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>
    );
  }
}
/*
<p>"I should be able to finish two modules in a day." Expectation disproven. I  usualy do half of one module in a day in React.</p>
<p>For the love of history, I am getting farther away from the answer. The visuals have become hidden.</p>
<p>Input element takes this.state.input.</p>
<p>Outside the form is the text, h1. Text should be inside the form as it is part of the input. What is going on?</p>
<p>h1 also takes this.state.input. No, h1 is the text not in the field but on the button and it takes this.state.submit.</p>
<code>
<button type="submit">Submit!</button>
<h1 input={this.state.submit}></h1>
</code>
<p>Does button not have a value attribute?</p>
<p>Where does event.preventDefault() belong? This line belongs in the function that uses the parameter it uses, the handleSubmit function for state changes.</p>
<p>onSubmit handles the change. h1, according to the hints, accepts the value of submit. Please explain the value of submit to me.</p>
<p>While onChange takes event.target.value, onSubmit takes this.state.input. Is putting event.target.value into onSubmit equivalent?</p>
<code>handleSubmit()  {
  stateSet({submit: this.state.input});
}
</code>
<p>I had made the "stair chacker" error in smaller part, reversing "set" and "state."</p>
<p>I had misunderstood the function of h1. It was only possible to understand it after the program ran correctly. Text submitted is transformed into visible text outside the form in an h1 element. This is why input value is dropped in visible text.</p>
<p></p>

*/