Callback props in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when the button is pressed?

Consider this React Native component using a callback prop. What will be logged when the button is pressed?

React Native

import React from 'react';
import { Button, View } from 'react-native';

function Child({ onPress }) {
  return <Button title="Press me" onPress={onPress} />;
}

export default function Parent() {
  const handlePress = () => {
    console.log('Button pressed!');
  };
  return <View><Child onPress={handlePress} /></View>;
}

A Nothing happens because onPress is not called.

B The message 'Button pressed!' is logged to the console.

C An error occurs because onPress is not a function.

D The app crashes due to missing onPress prop.

💡 Hint

The Child component receives a function as a prop and uses it as the button's onPress handler.

The Parent passes a function handlePress as the onPress prop to Child. When the button is pressed, Child calls onPress, which triggers handlePress and logs the message.

🧠 Conceptual

intermediate

Why use callback props in React Native?

Why do React Native components often use callback props like onPress instead of handling events internally?

A To make components slower but more complex.

B Because React Native does not support internal event handling.

C To allow parent components to control behavior when events happen in child components.

D To prevent any interaction with the UI.

💡 Hint

Think about who decides what happens when a button is pressed.

Callback props let parent components decide what to do when a child component triggers an event, keeping components reusable and flexible.

📝 Syntax

advanced

Identify the correct callback prop usage

Which option correctly passes a callback prop to a child component and uses it on a button press?

React Native

function Child({ onAction }) {
  return <Button title="Click" onPress={onAction} />;
}

function Parent() {
  const doSomething = () => alert('Done');
  return <Child ??? />;
}

A <Child onAction=doSomething />

B <Child onAction={doSomething()} />

C <Child onAction={() => doSomething} />

D <Child onAction={doSomething} />

💡 Hint

Passing the function itself without calling it is key.

Option D correctly passes the function doSomething as a callback prop. Option D calls the function immediately, passing its result. Option D passes a function returning doSomething, not calling it. Option D is missing JSX brackets.

❓ lifecycle

advanced

When is a callback prop executed?

Given a child component that calls a callback prop on a button press, when exactly is the callback function executed?

React Native

function Child({ onTap }) {
  return <Button title="Tap" onPress={onTap} />;
}

A Only when the button inside Child is pressed by the user.

B When the Parent component mounts.

C Immediately when the Child component renders.

D When the Child component unmounts.

💡 Hint

Think about user interaction with the button.

The callback prop onTap is executed only when the user presses the button, not during rendering or mounting.

🔧 Debug

expert

Why does this callback prop cause an error?

This Parent component passes a callback prop to Child, but pressing the button causes an error. What is the cause?

React Native

function Child({ onPress }) {
  return <Button title="Go" onPress={onPress} />;
}

function Parent() {
  const message = 'Hello';
  return <Child onPress={message} />;
}

A onPress expects a function but received a string, causing a runtime error.

B The Child component is missing the onPress prop.

C The Button component does not support onPress.

D The Parent component forgot to import React.

💡 Hint

Check the type of the prop passed to onPress.

The Button's onPress prop must be a function. Passing a string causes a runtime error when the button is pressed.