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.