Passing arguments to handlers in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass the id argument to the click handler.

React

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

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

Athis

BonClick

Cevent

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the handler itself instead of the argument.

Using this which is not defined in functional components.

The id is passed as an argument to the onClick handler using an arrow function.

2fill in blank

medium

Complete the code to pass both id and name to the handler.

React

function Item({ id, name, onSelect }) {
  return <div onClick={() => onSelect([1], [2])}>{name}</div>;
}

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

Aid

Bname

Cevent

DonSelect

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the handler without calling it.

Swapping the order of arguments.

The arrow function calls onSelect with both id and name as arguments.

3fill in blank

hard

Fix the error in passing the id argument to the handler.

React

function ListItem({ id, onClick }) {
  return <li onClick=[1]>Item</li>;
}

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

A() => onClick(id)

B() => id

Cid

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the handler directly instead of passing a function.

Using the argument without wrapping in a function.

Passing onClick({id}) calls the function immediately. Wrapping it in an arrow function () => onClick(id) delays the call until the click.

4fill in blank

hard

Fill both blanks to pass id and event to the handler.

React

function Clickable({ id, onAction }) {
  return <button onClick={(event) => onAction([1], [2])}>Press</button>;
}

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

Aid

Bevent

ConAction

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Passing this which is undefined here.

Swapping the order of arguments.

The arrow function receives event and calls onAction with id and event as arguments.

5fill in blank

hard

Fill all three blanks to pass userId, event, and extra to the handler.

React

function UserButton({ userId, extra, onUserClick }) {
  return <button onClick={(event) => onUserClick([1], [2], [3])}>Click User</button>;
}

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

AuserId

Bevent

Cextra

DonUserClick

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the handler itself instead of calling it.

Forgetting to include the event argument.

The arrow function calls onUserClick with userId, the click event, and extra data.