Why two onChange in Controlled Input form?

JavaScript
1

Tell us what’s happening:

I was able to pass the challenge, I just have a question about the form and the double use of onChange so let’s focus on that

Form tag has a submit that goes to {this.onChange}
and input value uses onChange to fire the method {this.handleChange}

So my question is am I nesting onChange? Is the form on submit firing onChange last, after the this.onChange finishes the return from this.handleChange?

When does the form {this.onChange} get linked to the {this.handleChange}?

Your code so far


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line

    // change code above this line
  }
  // change code below this line

  // change code above this line
  render() {
    return (
      <div>
        { /* is this.onChange being overrided by the input line? */}

<form onSubmit = {this.onChange} >
  <input value = {this.state.input} onChange = {this.handleChange} />
</form>

        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-input

2

That depends on how you implement onChange() handler. i.e. You did write onChange() such that it calls handleChange() or didn’t.

The onSubmit event in the form tag and the onChange event in the input tag are mutually exclusive. There is no linkage going on between them by default.

I don’t know why you had to implement onChange() for this challenge or handle onSubmit event in the form tag. Maybe, you were experimenting. But the challenge asks for none of them.