Callback props in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a callback prop named onPress to the Button component.

React Native

function MyButton({ onPress }) {
  return <Button title="Click me" [1] />;
}

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

Apress={onPress}

BonPress={onPress}

Cclick={onPress}

DonClick={onPress}

Attempts:

3 left

💡 Hint

Common Mistakes

Using onClick instead of onPress in React Native.

Forgetting to pass the callback as a prop.

In React Native, the Button component uses the onPress prop to handle press events. So you pass the callback as onPress={onPress}.

2fill in blank

medium

Complete the code to call the callback prop onPress when the button is pressed.

React Native

function MyButton({ onPress }) {
  return <Button title="Tap me" onPress={() => [1] />;
}

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

Aconsole.log('Pressed')

Balert('Pressed')

ChandlePress()

DonPress()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling a different function like handlePress() that is not defined.

Logging or alerting instead of calling the callback.

To trigger the callback prop, you call it as a function inside the event handler: onPress().

3fill in blank

hard

Fix the error in the code to correctly pass a callback prop named onPress to MyButton.

React Native

function Parent() {
  function handlePress() {
    console.log('Button pressed');
  }

  return <MyButton [1] />;
}

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

AonPress={handlePress()}

BonPress="handlePress"

ConPress={handlePress}

DonPress={() => handlePress}

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function immediately instead of passing it.

Passing the function name as a string.

You should pass the function itself as a prop, not call it immediately. So use onPress={handlePress}.

4fill in blank

hard

Fill both blanks to create a callback prop onPress that calls handlePress with argument 42.

React Native

function Parent() {
  function handlePress(value) {
    console.log(`Value is ${value}`);
  }

  return <MyButton onPress={() => [1]([2])} />;
}

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

AhandlePress

B42

ChandlePress()

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Putting parentheses in the first blank like handlePress().

Using a variable name instead of the actual argument.

You pass an arrow function that calls handlePress with the argument 42 when pressed.

5fill in blank

hard

Fill all three blanks to define a MyButton component that accepts an onPress callback prop and calls it when pressed.

React Native

function MyButton({ [1] }) {
  return <Button title="Press me" [2]={() => [3]()} />;
}

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

AonPress

DhandlePress

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the prop and the event handler.

Not calling the function inside the arrow function.

The component receives the onPress prop and calls onPress() when the button is pressed.