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.

Practice

1. In React, how do you correctly attach a click event handler to a button?

easy

A. <button onclick="handleClick()">Click me</button>

B. <button onClick={handleClick}>Click me</button>

C. <button OnClick={handleClick}>Click me</button>

D. <button onClick="handleClick()">Click me</button>

Solution

1. Step 1: Understand React event naming

   React uses camelCase for event handlers, so onClick is correct, not lowercase or capitalized differently.

2. Step 2: Attach event handler as a function reference

   In React, event handlers are passed as functions, not strings. So {handleClick} is correct, not a string like "handleClick()".

3. Final Answer:

   <button onClick={handleClick}>Click me</button> -> Option B

4. Quick Check:

   React event handler syntax = <button onClick={handleClick}>Click me</button> [OK]

Hint: Use camelCase and pass function, not string, for events [OK]

Common Mistakes:

• Using lowercase event names like onclick
• Passing event handler as a string instead of function
• Capitalizing event names incorrectly

2. Which of the following is the correct syntax to define an event handler function inside a React functional component?

easy

A. const handleClick = () => console.log('Clicked');

B. handleClick = () => console.log('Clicked');

C. handleClick() => { console.log('Clicked'); }

D. def handleClick() { console.log('Clicked'); }

Solution

1. Step 1: Recognize JavaScript function syntax in React

   React functional components use JavaScript, preferring arrow functions declared with const for event handlers.

2. Step 2: Identify correct arrow function syntax

   const handleClick = () => console.log('Clicked'); is correct. Other options have syntax errors such as missing variable declaration or invalid syntax.

3. Final Answer:

   const handleClick = () => console.log('Clicked'); -> Option A

4. Quick Check:

   Arrow function syntax = const handleClick = () => console.log('Clicked'); [OK]

Hint: Use arrow functions for event handlers inside components [OK]

Common Mistakes:

• Using invalid function syntax like 'handleClick() => {}'
• Using Python syntax 'def' in JavaScript
• Not assigning function to a variable

3. What will be the output when the button is clicked in this React component?

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => setCount(count + 1);
  return (
    <button onClick={handleClick}>Clicked {count} times</button>
  );
}

medium

A. Button shows 'Clicked 0 times' initially and increments on each click

B. Button shows 'Clicked 1 times' initially and increments on click

C. Button shows 'Clicked 0 times' and never changes

D. Button causes a runtime error on click

Solution

1. Step 1: Understand useState initial value

   The state variable count starts at 0, so the button initially shows 'Clicked 0 times'.

2. Step 2: Analyze handleClick behavior

   Each click calls handleClick, which updates count by adding 1, so the displayed count increments on each click.

3. Final Answer:

   Button shows 'Clicked 0 times' initially and increments on each click -> Option A

4. Quick Check:

   useState increments count on click = Button shows 'Clicked 0 times' initially and increments on each click [OK]

Hint: useState updates UI on event, so count increments on clicks [OK]

Common Mistakes:

• Thinking state does not update on click
• Confusing initial state with updated state
• Expecting runtime errors from correct code

4. Identify the error in this React event handler code:

function MyButton() {
  const handleClick = () => {
    console.log('Clicked');
  }
  return <button onclick={handleClick}>Click me</button>;
}

medium

A. Missing parentheses when calling handleClick

B. Button element must be self-closing

C. Incorrect event name 'onclick' should be 'onClick'

D. handleClick function is not defined

Solution

1. Step 1: Check event handler attribute name

   React requires camelCase event names, so onclick is incorrect; it should be onClick.

2. Step 2: Verify function definition and usage

   The function handleClick is correctly defined and passed as a reference, so no error there.

3. Final Answer:

   Incorrect event name 'onclick' should be 'onClick' -> Option C

4. Quick Check:

   React event names are camelCase = Incorrect event name 'onclick' should be 'onClick' [OK]

Hint: React event names use camelCase, not lowercase [OK]

Common Mistakes:

• Using lowercase event names
• Forgetting to pass function reference
• Misunderstanding JSX syntax for elements

5. You want to create a React component that increments a counter only when the user presses the Enter key inside an input box. Which is the correct way to handle this event?

function EnterCounter() {
  const [count, setCount] = React.useState(0);
  const handleKeyDown = (event) => {
    // What condition should be here?
  };
  return (
    <>
      <input type="text" onKeyDown={handleKeyDown} aria-label="Enter key counter input" />
      <p>Count: {count}</p>
    </>
  );
}

hard

A. if (event.which === 'Enter') setCount(count + 1);

B. if (event.keyCode === 13) setCount(count + 1);

C. if (event.key === 13) setCount(count + 1);

D. if (event.key === 'Enter') setCount(count + 1);

Solution

1. Step 1: Identify the correct property for key detection

   Modern React and browsers use event.key as a string to detect keys, so checking event.key === 'Enter' is correct.

2. Step 2: Understand deprecated properties

   event.keyCode and event.which are deprecated or inconsistent; also, comparing event.key to a number like 13 is incorrect.

3. Final Answer:

   if (event.key === 'Enter') setCount(count + 1); -> Option D

4. Quick Check:

   Use event.key string for key detection = if (event.key === 'Enter') setCount(count + 1); [OK]

Hint: Use event.key === 'Enter' to detect Enter key presses [OK]

Common Mistakes:

• Using deprecated event.keyCode or event.which
• Comparing event.key to a number instead of string
• Not checking key inside keydown event