Synthetic events in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to handle a click event on the button.

React

function ClickButton() {
  function handleClick() {
    alert('Button clicked!');
  }

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

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

AhandleClickEvent

BhandleClick

CclickHandler

DhandleClick()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after the function name causing immediate call.

Using a wrong function name that is not defined.

The onClick attribute expects a function reference, so you pass handleClick without parentheses.

2fill in blank

medium

Complete the code to access the event object in the click handler.

React

function ClickLogger() {
  function handleClick([1]) {
    console.log([1].type);
  }

  return <button onClick={handleClick}>Log Event</button>;
}

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

Aevent

Bclick

Cevt

De

Attempts:

3 left

💡 Hint

Common Mistakes

Not including a parameter to receive the event object.

Using a parameter name that is not used inside the function.

The event object is commonly named e or event. Here, e is used as the parameter to access event properties.

3fill in blank

hard

Fix the error in the code to prevent the default form submission behavior.

React

function FormSubmit() {
  function handleSubmit(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'

Aevent.preventDefault()

Bevent.stopPropagation()

Cevent.defaultPrevented()

Devent.prevent()

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like prevent() or defaultPrevented().

Using stopPropagation() which only stops event bubbling.

Calling event.preventDefault() stops the form from submitting and refreshing the page.

4fill in blank

hard

Fill both blanks to update state with the input value on change.

React

import { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  function handleChange([1]) {
    setText([2].target.value);
  }

  return <input type="text" value={text} onChange={handleChange} aria-label="Text input" />;
}

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

Ae

Bevent

Cevt

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the event parameter and inside the function.

Trying to access value without the event object.

The event object is commonly named e. We use e.target.value to get the input's current value.

5fill in blank

hard

Fill all three blanks to create a button that toggles a message on click using state and synthetic events.

React

import { useState } from 'react';

function ToggleMessage() {
  const [visible, setVisible] = useState(false);

  function handleClick([1]) {
    setVisible(prev => ![2]);
  }

  return (
    <>
      <button onClick=[3] aria-pressed={visible} aria-label="Toggle message">
        Toggle Message
      </button>
      {visible && <p>The message is now visible.</p>}
    </>
  );
}

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

Ae

Bvisible

ChandleClick

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Not passing the event parameter to the handler function.

Using the wrong state variable name inside the toggle.

Passing the handler call instead of the function reference to onClick.

The event parameter is named e. We toggle the visible state by negating it. The button's onClick uses the handleClick function.