Inline vs function handlers in React - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a click handler inline that shows an alert.

React

function Button() {
  return <button onClick=[1]>Click me</button>;
}

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

Aalert('Clicked!')

Bfunction alert() {}

C() => alert('Clicked!')

Dconsole.log('Clicked!')

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert('Clicked!') directly calls alert immediately instead of on click.

Passing console.log instead of a function that triggers alert.

The onClick attribute expects a function. Using an inline arrow function like () => alert('Clicked!') works correctly.

2fill in blank

medium

Complete the code to define a separate function handler and use it in the button.

React

function Button() {
  function handleClick() {
    alert('Clicked!');
  }
  return <button onClick=[1]>Click me</button>;
}

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

AhandleClick()

Balert

C() => handleClick()

DhandleClick

Attempts:

3 left

💡 Hint

Common Mistakes

Calling handleClick immediately by adding parentheses.

Passing alert directly instead of the handler function.

We pass the function handleClick itself to onClick, not calling it immediately.

3fill in blank

hard

Fix the error in the code by choosing the correct way to pass the handler.

React

function Button() {
  const handleClick = () => alert('Clicked!');
  return <button onClick=[1]>Click me</button>;
}

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

AhandleClick

BhandleClick()

C() => handleClick()

Dalert('Clicked!')

Attempts:

3 left

💡 Hint

Common Mistakes

Using handleClick() calls the function immediately on render.

Passing alert('Clicked!') calls alert immediately.

The handler should be passed as a function reference, not called immediately.

4fill in blank

hard

Fill both blanks to create a button that calls a named function handler on click.

React

function Button() {
  function [1]() {
    alert('Clicked!');
  }
  return <button onClick=[2]>Click me</button>;
}

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

AhandleClick

BonClick

ChandleClick()

DclickHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the function and the handler.

Calling the function immediately by adding parentheses.

The function name and the handler passed to onClick must match and be passed without parentheses.

5fill in blank

hard

Fill all three blanks to create a button that calls a function handler with a parameter on click.

React

function Button() {
  function [1](message) {
    alert(message);
  }
  return <button onClick={() => [2]([3])}>Click me</button>;
}

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

AshowAlert

C'Hello!'

D'Clicked!'

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the function and the call.

Passing the wrong string message.

Calling the function without an arrow function wrapper.

The function name is showAlert. The inline arrow calls showAlert with the message 'Clicked!'.