Preventing default behavior in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to prevent the default form submission behavior.

React

function MyForm() {
  function handleSubmit(event) {
    event.[1]();
    alert('Form submitted!');
  }

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

Drag options to blanks, or click blank then click option'

ApreventDefault

Bhalt

CstopPropagation

Dcancel

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopPropagation instead of preventDefault

Trying to return false instead of calling preventDefault

Calling event.preventDefault() stops the browser from performing the default action, like submitting a form and reloading the page.

2fill in blank

medium

Complete the code to prevent the default link navigation when clicking the anchor tag.

React

function Link() {
  function handleClick(event) {
    event.[1]();
    alert('Link clicked without navigation');
  }

  return <a href="https://example.com" onClick={handleClick}>Click me</a>;
}

Drag options to blanks, or click blank then click option'

AstopPropagation

BpreventDefault

CcancelBubble

Dhalt

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopPropagation which only stops event bubbling

Not calling any method and expecting the link not to navigate

Using event.preventDefault() stops the browser from following the link's URL.

3fill in blank

hard

Fix the error in the event handler to correctly prevent default behavior.

React

function Button() {
  function handleClick(event) {
    event.[1]();
    alert('Button clicked');
  }

  return <button onClick={handleClick}>Click me</button>;
}

Drag options to blanks, or click blank then click option'

ApreventDefault

BstopPropagation()

CpreventDefault()

DstopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting parentheses and writing event.preventDefault instead of event.preventDefault()

Using stopPropagation instead of preventDefault

You must call event.preventDefault() as a function with parentheses to prevent the default action.

4fill in blank

hard

Fill both blanks to prevent default behavior and stop event bubbling in the click handler.

React

function CustomButton() {
  function handleClick(event) {
    event.[1]();
    event.[2]();
    alert('Clicked without default or bubbling');
  }

  return <button onClick={handleClick}>Click me</button>;
}

Drag options to blanks, or click blank then click option'

ApreventDefault

BstopPropagation

CcancelBubble

Dhalt

Attempts:

3 left

💡 Hint

Common Mistakes

Using cancelBubble which is not a method but a property

Calling only one of the methods and expecting both behaviors

Calling preventDefault() stops the default action, and stopPropagation() stops the event from bubbling up to parent elements.

5fill in blank

hard

Fill all three blanks to prevent default, stop propagation, and log the event type.

React

function LoggerButton() {
  function handleClick(event) {
    event.[1]();
    event.[2]();
    console.log(event.[3]);
  }

  return <button onClick={handleClick}>Click me</button>;
}

Drag options to blanks, or click blank then click option'

ApreventDefault

BstopPropagation

Ctype

Dtarget

Attempts:

3 left

💡 Hint

Common Mistakes

Logging event.target instead of event.type

Not calling the methods with parentheses

This code prevents the default action, stops the event from bubbling, and logs the event type (like 'click').