Callback props in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a callback prop in React Native?

A callback prop is a function passed from a parent component to a child component. The child calls this function to send data or notify the parent about events.

beginner

Why do we use callback props in React Native?

We use callback props to let child components communicate with their parents, especially to send data or trigger actions in the parent.

beginner

How do you define a callback prop in a parent component?

You define a function in the parent and pass it as a prop to the child component, like <Child onPress={handlePress} />.

beginner

How does a child component use a callback prop?

The child calls the function received as a prop, for example props.onPress(), to notify or send data back to the parent.

intermediate

What happens if a callback prop is not passed to a child component?

If the child tries to call the callback but it is not passed, it can cause an error. It's good to check if the prop exists before calling it.

What is the main purpose of a callback prop in React Native?

A To allow child components to send data to parent components

B To style components dynamically

C To fetch data from the internet

D To create new components

Callback props let child components communicate with parents by sending data or events.

How do you pass a callback prop from a parent to a child component?

A <Child style={functionName} />

B <Child data={functionName} />

C <Child callback={functionName} />

D <Child onClick={functionName} />

You pass the function as a prop, often named to describe the event, like callback or onPress.

In the child component, how do you call the callback prop named onPress?

A this.onPress()

B props.onPress()

C call.onPress()

D onPress()

The child calls the function from props using props.onPress() to notify the parent.

What should you do before calling a callback prop in a child component?

A Delete the callback prop

B Change the callback prop

C Ignore the callback prop

D Check if the callback prop exists

Checking if the callback exists prevents errors if the parent did not pass it.

Which of these is NOT a reason to use callback props?

A To pass styling information

B To send data from child to parent

C To notify parent of user actions

D To update parent state from child

Styling is usually passed as style props, not callback functions.

Explain how callback props enable communication between parent and child components in React Native.

Think about how a child tells the parent something happened.

Describe the steps to safely use a callback prop in a child component.

Avoid errors by verifying the callback before calling.