Preventing default behavior in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does event.preventDefault() do in React event handling?

It stops the browser's default action for that event, like following a link or submitting a form, allowing you to control what happens next.

beginner

Why might you want to use event.preventDefault() in a form submit handler?

To stop the page from reloading and handle the form data with JavaScript instead, giving a smoother user experience.

beginner

How do you access the event object in a React function component's event handler?

React passes the event object as the first argument to the event handler function.

intermediate

True or False: Calling event.preventDefault() will stop the event from bubbling up to parent elements.

False. preventDefault() stops the default browser action but does not stop event bubbling. To stop bubbling, use event.stopPropagation().

beginner

In React, when handling a link (<a>) click, what happens if you don't call event.preventDefault()?

The browser will follow the link and navigate to the URL, causing a page reload or navigation away from your React app.

What is the main purpose of event.preventDefault() in React?

A Stop the event from bubbling up

B Remove the event listener

C Stop the browser's default action for the event

D Trigger a re-render of the component

event.preventDefault() stops the browser's default behavior, like following a link or submitting a form, but does not stop event bubbling.

Which event object method stops the event from bubbling up to parent elements?

A event.stopPropagation()

B event.preventDefault()

C event.stopDefault()

D event.cancel()

event.stopPropagation() stops the event from bubbling up. preventDefault() only stops default browser actions.

In a React form submit handler, what happens if you don't call event.preventDefault()?

A The form data is sent via JavaScript without page reload

B The form submission is canceled silently

C The event handler is not called

D The page reloads and the form submits normally

Without preventDefault(), the browser submits the form and reloads the page.

How do you get access to the event object in a React event handler?

A It is passed as the first argument to the handler function

B You must import it from React

C It is a global variable

D You cannot access it in React

React passes the event object as the first argument to your event handler function.

Which of these is a common use case for event.preventDefault() in React?

A Preventing a button from being clicked

B Stopping a link from navigating away

C Stopping a component from rendering

D Clearing the input field automatically

Calling preventDefault() on a link click stops the browser from navigating away.

Explain how and why you would use event.preventDefault() in a React form submission.

Think about what happens when a form submits normally in a browser.

Describe the difference between event.preventDefault() and event.stopPropagation() in React event handling.

One controls browser behavior, the other controls event flow.