Why have to use event.preventDefault()?

Tell us what’s happening:
The code is working perfectly without using event.preventDefault(). I don’t understand why must have to use it, cause in my logic the value of submit will be changed with input automatically calling the handleSubmit() method !

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() {
  // change code below this line
  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: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36.

Challenge: Create a Controlled Form

Link to the challenge:

Welcome, nuruddinshohan.

This is a good point, because the fCC preview does not seem to be affected by event.preventDefault. In the event object, the defaultPrevented is always null. This leads me to believe the fCC frame-runner is not attaching any default to the form, in any case.

As for the use of event.preventDefault: In the past, it has caused me great headache, because my page was refreshing, and I was losing state, and it was because I did not think to prevent this default action. So, if anything, remember that there is merit in knowing (at least having in the back of your mind) about this behaviour and fix.

Hope this helps.

1 Like

thanks for your reply. In a practical scenario not using event.preventDefault can cause any problem?

An HTML form reloads the page on submit. So if you don’t prevent that behaviour, the page will reload. As a React app is going to be a single-page application and is therefore not supposed to reload, that will break the application.

Similarly, a browser will attempt to load a new web page in the case of clicking an anchor element with a URL that is different to the one already in view, so preventDefault has to be used for client-side routing (ie things like React Router that work by changing the visible URL programmatically but actually stay in the same page).

There are a load of other elements that have event-driven behaviours. HTML has built in behaviours that are designed to take advantage of the fact that web pages on the internet work a certain way, and if you want to bypass those behaviours, preventDefault helps do that by suppressing the normal default event behaviour.

There are other things that need preventDefault in React but are not to do with [re]loading URLs. For example, the HTML <details> element will work as a controlled component (like HTML <input> elements in the form from the exercise), but they won’t work properly (responding correctly to open) unless the default behaviour is prevented.

3 Likes

event.preventDefault() would stop some default behaviour but there are some situations where you may need event.stopPropagation();

I remember having unexpected results, in the past, caused by the event bubbling, and I wrongly assumed in the past that preventDefault() should have prevented it.

https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault#:~:text=Up%20vote%201-,event.,being%20notified%20of%20the%20event.

I think is worth it to be aware of the event bubbling and event capturing capabilities.

2 Likes