React query related "Create a Controlled Form" Challenge

In the following code:

  1. Why are we passing “event” parameter in handleSubmit() function, although there is no use of event parameter inside the body of this function. If we do not pass this parameter error occurs. Kindly explain this matter.

  2. In handleChange(), we changed state by using => input: event.target.value.
    kindly explain how “event” generated and what it stores. what is target and value and how are we using them in this scenario.

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


**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36</code>.

**Challenge:** Create a Controlled Form

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

Hello and welcome to the forum :grin:!

That is not correct. We’re using the event parameter (see the code comments):

handleSubmit(event) {
  // change code below this line

  // Here the event parameter is used
  // hence, if you remove the parameter
  // an error occurs
  event.preventDefault()
 
  this.setState({
    submit: this.state.input
 
  })
  // change code above this line
}

The event parameter is an object containing information generated by an event triggered by a DOM element.

In other words, it’s the data passed whenever an event is triggered (a click on a button, a change on an input element, etc.).

What the event object stores depends on the event that was raised. I suggest you to read the MDN Documentation to understand how events are triggered and listened to.

The target is the element that triggered the event (a click, a change, etc.). Again, read the documentation to understand what an event is.

Finally, value is just what it says. Depending on the element that triggered the event, the value will be different.

  • If the element is an input:
    • Type text, then the value is the current user input.
    • Type radio or checkbox, then the value is the currently selected radio button or checkbox value attribute (it’s more complex than that, but I’ll leave it like this because we don’t usually interact directly with it).
  • If the element is a select, then the value is the currently selected option. This changes if the select is a multiple selection.

For what each element event data contains you can read the documentation of each element.

Hope it helps :slight_smile:,

Regards!

Thanks for the clarification mate.

1 Like