Preventing default behavior in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when clicking the link in this React component?

Consider this React component with a link. What will happen when the user clicks the link?

React

import React from 'react';

export default function LinkComponent() {
  function handleClick(event) {
    event.preventDefault();
    alert('Link clicked but default prevented');
  }

  return (
    <a href="https://example.com" onClick={handleClick} aria-label="Example link">
      Go to example.com
    </a>
  );
}

A The alert shows but the browser does NOT navigate to https://example.com.

B The browser navigates to https://example.com and shows the alert.

C The browser navigates to https://example.com without showing the alert.

D Nothing happens when clicking the link.

💡 Hint

Think about what event.preventDefault() does in a click event on a link.

The event.preventDefault() stops the browser from following the link. So the alert shows, but navigation does not happen.

❓ state_output

intermediate

What is the button's label after clicking it once?

This React component toggles a button label on click. What will the button show after the first click?

React

import React, { useState } from 'react';

export default function ToggleButton() {
  const [clicked, setClicked] = useState(false);

  function handleClick(event) {
    event.preventDefault();
    setClicked(!clicked);
  }

  return (
    <button onClick={handleClick} aria-pressed={clicked}>
      {clicked ? 'Clicked!' : 'Click me'}
    </button>
  );
}

A The button label changes to 'Clicked!'.

B The button label stays 'Click me'.

C The button label disappears.

D The button becomes disabled.

💡 Hint

Check what happens to the state when the button is clicked and default is prevented.

The handleClick toggles the clicked state. The label updates to 'Clicked!'. The preventDefault() does not stop state changes.

📝 Syntax

advanced

Which option correctly prevents form submission in React?

You want to prevent a form from submitting and refreshing the page. Which onSubmit handler is correct?

React

function Form() {
  function handleSubmit(event) {
    // prevent form submission
  }

  return (
    <form onSubmit={handleSubmit} aria-label="Sample form">
      <button type="submit">Submit</button>
    </form>
  );
}

A function handleSubmit(event) { event.stopPropagation(); console.log('Submitted'); }

B function handleSubmit(event) { event.preventDefault(); console.log('Submitted'); }

C function handleSubmit() { event.preventDefault(); console.log('Submitted'); }

D function handleSubmit(event) { return false; console.log('Submitted'); }

💡 Hint

Remember the event object must be passed and preventDefault called on it.

Only option B correctly receives the event and calls event.preventDefault(). Option B misses the event parameter, causing a ReferenceError. Option B stops propagation but does not prevent submission. Option B returns false but does not prevent default in React.

🔧 Debug

advanced

Why does this React form still submit despite calling preventDefault?

Look at this code. The form submits and reloads the page even though preventDefault is called. Why?

React

function MyForm() {
  function handleSubmit(event) {
    event.preventDefault();
    alert('Form submitted');
  }

  return (
    <form onSubmit={handleSubmit} aria-label="Debug form">
      <button type="submit">Submit</button>
    </form>
  );
}

A The form needs a method attribute to prevent submission.

B preventDefault is called too late after alert, so form submits anyway.

C The button type should be 'button' not 'submit' to prevent submission.

D The event object is not passed to handleSubmit, so event is undefined causing an error.

💡 Hint

Check the function parameters and usage of event inside handleSubmit.

The handleSubmit function does not receive the event parameter, so event is undefined. This causes a runtime error and prevents preventDefault from working.

🧠 Conceptual

expert

What is the main reason to use event.preventDefault() in React event handlers?

Why do React developers use event.preventDefault() in event handlers like onClick or onSubmit?

A To disable the event handler so it runs only once.

B To stop React from re-rendering the component after the event.

C To stop the browser's default action so React can handle the event without page reload or navigation.

D To automatically stop propagation of the event to parent elements.

💡 Hint

Think about what happens by default when clicking links or submitting forms in a browser.

event.preventDefault() stops the browser's default behavior like navigating or reloading. This lets React control what happens next without losing state or refreshing the page.

Practice

1. What does event.preventDefault() do in a React event handler?

easy

A. Removes the event listener from the element

B. Stops the browser's default action for that event

C. Triggers the event again immediately

D. Logs the event details to the console

Solution

1. Step 1: Understand the purpose of preventDefault()

   This method stops the browser from performing its usual action, like submitting a form or following a link.

2. Step 2: Recognize what preventDefault() does not do

   It does not remove listeners, re-trigger events, or log anything automatically.

3. Final Answer:

   Stops the browser's default action for that event -> Option B

4. Quick Check:

   preventDefault() = Stops default browser action [OK]

Hint: Remember: preventDefault stops browser's automatic event action [OK]

Common Mistakes:

• Thinking preventDefault removes event listeners
• Assuming preventDefault triggers the event again
• Confusing preventDefault with logging or debugging

2. Which of the following is the correct way to prevent a form submission's default behavior in React?

easy

A. function handleSubmit() { event.preventDefault(); }

B. function handleSubmit(event) { preventDefault(); }

C. function handleSubmit(event) { event.preventDefault(); }

D. function handleSubmit() { preventDefault(event); }

Solution

1. Step 1: Check the event parameter usage

   The event object must be passed as a parameter to the handler to call preventDefault() on it.

2. Step 2: Verify the syntax of preventDefault call

   Calling event.preventDefault() inside the handler with event parameter is correct syntax.

3. Final Answer:

   function handleSubmit(event) { event.preventDefault(); } -> Option C

4. Quick Check:

   Correct syntax requires event parameter and event.preventDefault() [OK]

Hint: Always include event parameter to call event.preventDefault() [OK]

Common Mistakes:

• Not passing event parameter to the handler
• Calling preventDefault without event prefix
• Trying to call preventDefault without parentheses

3. What will be the output when clicking the link in this React component?

function Link() {
  function handleClick(event) {
    event.preventDefault();
    alert('Link clicked!');
  }
  return <a href='https://example.com' onClick={handleClick}>Click me</a>;
}

medium

A. Only the alert 'Link clicked!' appears, no navigation happens

B. The browser navigates to https://example.com and shows alert

C. Nothing happens on click

D. The link navigates without showing alert

Solution

1. Step 1: Understand event.preventDefault() effect on link

   Calling event.preventDefault() stops the browser from navigating to the href URL.

2. Step 2: Check what else happens on click

   The alert('Link clicked!') runs, so the alert appears on click.

3. Final Answer:

   Only the alert 'Link clicked!' appears, no navigation happens -> Option A

4. Quick Check:

   preventDefault stops navigation, alert still runs [OK]

Hint: preventDefault stops navigation but lets your code run [OK]

Common Mistakes:

• Expecting navigation to happen despite preventDefault
• Thinking alert won't show if preventDefault is called
• Confusing preventDefault with stopPropagation

4. Identify the error in this React event handler that tries to prevent form submission:

function handleSubmit() {
  event.preventDefault();
  console.log('Submitted');
}

medium

A. The function should return false instead of calling preventDefault

B. Using console.log inside the handler is not allowed

C. preventDefault() should be called after console.log

D. Missing event parameter in the function definition

Solution

1. Step 1: Check function parameters

   The handler uses event.preventDefault() but does not receive event as a parameter, so event is undefined.

2. Step 2: Understand consequence of missing event

   This causes a runtime error because event is not defined in the function scope.

3. Final Answer:

   Missing event parameter in the function definition -> Option D

4. Quick Check:

   Event object must be passed to handler to call preventDefault [OK]

Hint: Always include event parameter to access event.preventDefault() [OK]

Common Mistakes:

• Forgetting to add event parameter
• Thinking preventDefault can be called globally
• Confusing preventDefault with returning false

5. You want to prevent a form from submitting only if a checkbox is unchecked. Which React event handler correctly implements this behavior?

function handleSubmit(event) {
  // Prevent submission only if checkbox is unchecked
  const checkbox = document.getElementById('agree');
  if (/* condition here */) {
    event.preventDefault();
    alert('You must agree first');
  }
}

hard

A. if (!checkbox.checked) { event.preventDefault(); alert('You must agree first'); }

B. if (checkbox.checked) { event.preventDefault(); alert('You must agree first'); }

C. if (checkbox.value === false) { event.preventDefault(); alert('You must agree first'); }

D. if (checkbox === null) { event.preventDefault(); alert('You must agree first'); }

Solution

1. Step 1: Check the checkbox condition for preventing submission

   You want to prevent submission if the checkbox is NOT checked, so condition is !checkbox.checked.

2. Step 2: Confirm preventDefault is called only when checkbox is unchecked

   Calling event.preventDefault() inside this condition stops submission correctly.

3. Final Answer:

   if (!checkbox.checked) { event.preventDefault(); alert('You must agree first'); } -> Option A

4. Quick Check:

   Prevent submission when checkbox is unchecked = !checkbox.checked [OK]

Hint: Use !checkbox.checked to detect unchecked state before preventDefault [OK]

Common Mistakes:

• Using checkbox.checked instead of !checkbox.checked
• Checking checkbox.value instead of checked property
• Checking if checkbox is null instead of its checked state