Handling events in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a click event handler to the button.

React

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

  return <button onClick=[1]>Click me</button>;
}

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

AhandleClick()

BhandleClick

CclickHandler

DonClick

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after the function name, which calls it immediately.

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 update the state when the button is clicked.

React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount([1]);
  }

  return <button onClick={increment}>Count: {count}</button>;
}

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

Acount + 1

BsetCount + 1

Ccount++

Dcount - 1

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use count++ which does not work as expected in React state.

Passing setCount + 1 which is invalid.

To update the state, you pass the new value to setCount. Here, we add 1 to the current count.

3fill in blank

hard

Fix the error in the event handler to prevent the default form submission.

React

function Form() {
  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.defaultPrevented()

Bevent.stopPropagation()

Cevent.preventDefault()

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 create a button that toggles text between 'ON' and 'OFF'.

React

import { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  function toggle() {
    setIsOn([1]);
  }

  return <button onClick={toggle}>{isOn ? [2] : 'OFF'}</button>;
}

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

A!isOn

B'ON'

C'On'

DisOn

Attempts:

3 left

💡 Hint

Common Mistakes

Setting state to isOn which does not toggle.

Using lowercase 'on' instead of uppercase 'ON' in the button text.

We toggle the boolean state by setting it to !isOn. The button shows 'ON' when isOn is true.

5fill in blank

hard

Fill all three blanks to create a form input that updates state and shows the typed text.

React

import { useState } from 'react';

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

  function handleChange(event) {
    setText([1]);
  }

  return (
    <>
      <input type="text" value={text} onChange=[2] aria-label=[3] />
      <p>You typed: {text}</p>
    </>
  );
}

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

Aevent.target.value

BhandleChange

C"Text input field"

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Passing text instead of event.target.value to setText.

Not providing an aria-label for accessibility.

The input's onChange calls handleChange. Inside it, we update state with event.target.value. The aria-label improves accessibility by describing the input.