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.

Practice

1. What is the main purpose of using callback props in React Native components?

easy

A. To manage component state internally

B. To style components dynamically

C. To allow child components to communicate events back to parent components

D. To fetch data from an API

Solution

1. Step 1: Understand callback props role

   Callback props are functions passed from parent to child to notify the parent about events.

2. Step 2: Identify communication direction

   They let children send information or events back to parents, enabling communication.

3. Final Answer:

   To allow child components to communicate events back to parent components -> Option C

4. Quick Check:

   Callback props = child-to-parent communication [OK]

Hint: Callback props let children tell parents about events [OK]

Common Mistakes:

• Thinking callback props manage styling
• Confusing callback props with state management
• Assuming callback props fetch data

2. Which of the following is the correct way to pass a callback prop named onPress from a parent to a child component in React Native?

easy

A.

B.

C. handlePress />

D.

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed as attributes with values inside curly braces for functions.

2. Step 2: Match correct syntax

   uses onPress={handlePress}, which is valid JSX syntax.

3. Final Answer:

   <ChildComponent onPress={handlePress} /> -> Option A

4. Quick Check:

   JSX props use = and curly braces for functions [OK]

Hint: Use = and curly braces to pass functions as props [OK]

Common Mistakes:

• Using colon : instead of =
• Using arrow => inside prop
• Adding parentheses () in prop name

3. Given the code below, what will be logged when the button is pressed?

function Parent() {
  const handleClick = () => console.log('Clicked!');
  return <Child onPress={handleClick} />;
}

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

medium

A. Nothing happens

B. Clicked!

C. Error: onPress is not a function

D. Button title is logged

Solution

1. Step 1: Trace callback prop usage

   The Parent passes handleClick as onPress prop to Child.

2. Step 2: Check Child button onPress

   The Child uses onPress prop as the button's onPress handler, so pressing calls handleClick.

3. Final Answer:

   Clicked! -> Option B

4. Quick Check:

   Button press triggers parent's callback [OK]

Hint: Child calls parent's function on event [OK]

Common Mistakes:

• Assuming onPress is undefined
• Thinking button title logs
• Ignoring callback function call

4. Identify the error in this React Native code snippet:

function Parent() {
  const handlePress = () => alert('Pressed');
  return <Child onPress={handlePress()} />;
}

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

medium

A. alert cannot be used in React Native

B. Child component is missing props destructuring

C. Button component does not support onPress

D. handlePress is called immediately instead of passed as a function

Solution

1. Step 1: Analyze prop passing

   In onPress={handlePress()}, the function is called immediately, passing its result (undefined) instead of the function.

2. Step 2: Understand correct usage

   We should pass the function itself without calling it: onPress={handlePress}.

3. Final Answer:

   handlePress is called immediately instead of passed as a function -> Option D

4. Quick Check:

   Pass function reference, not call it [OK]

Hint: Pass function, don't call it when passing as prop [OK]

Common Mistakes:

• Calling function instead of passing reference
• Thinking alert is invalid in React Native
• Ignoring destructuring in Child

5. You want a child component to notify the parent when a text input changes, but only if the input length is more than 3 characters. How should you implement the callback prop pattern to achieve this?

hard

A. Pass a callback prop from parent; child calls it only when input length > 3

B. Child manages input state and updates parent state directly

C. Parent listens to child's internal state without callback

D. Use a global variable to share input value between components

Solution

1. Step 1: Understand callback prop usage for conditional events

   The parent passes a function as a prop to the child to receive input changes.

2. Step 2: Implement conditional call in child

   The child calls the callback only if the input length is more than 3, controlling when to notify the parent.

3. Final Answer:

   Pass a callback prop from parent; child calls it only when input length > 3 -> Option A

4. Quick Check:

   Child controls event call; parent receives updates [OK]

Hint: Child calls parent callback only when condition meets [OK]

Common Mistakes:

• Letting child update parent state directly
• Ignoring conditional logic in child
• Using global variables for communication