Welcome back! You’ve already learned how to use props to pass data from parent to child components, and how to handle user interactions with event handlers and state. In this lesson, we’ll build on those skills by focusing on a common challenge: how can a child component trigger an action or update state in its parent? This is a key pattern in React Native, especially as your apps grow more complex and interactive.

Imagine you have a product card component with an “Add to Cart” button. When the user taps the button, you want the parent component to update the cart’s state. Passing event handlers as props is the solution. This lesson will show you how to do this in a clear, maintainable way, using practical examples and best practices.

Let’s briefly review a challenge you may have encountered: sometimes, a child component needs to let its parent know that something has happened. For example, a button inside a product card might need to tell the parent to increase the quantity of that product in the cart.

If you try to manage all state and logic inside the child, you’ll quickly run into problems. The child doesn’t have access to the parent’s state, and duplicating logic leads to messy, hard-to-maintain code. Instead, it’s best to keep the state and business logic in the parent and let the child “notify” the parent when something happens.

The most effective way to let a child component trigger an action in its parent is to pass an event handler function down as a prop. The parent defines the function, and the child calls it when needed.

Let’s look at a minimal example. Suppose you have a parent component that manages a product’s quantity and a child component that displays the product and includes an “Add to Cart” button.

Here’s the parent component:

And here’s the child component:

In this setup, the parent (App) owns the state and the logic for increasing the quantity. It passes the increaseQuantity function to the child (ProductCard) as a prop. When the user taps the button, the child calls onIncreaseQuantity, and the parent’s state updates.

This approach keeps your code organized: the parent manages the data, and the child focuses on the UI and user interaction.

Let’s expand the example to a more realistic product card, similar to what you might see in a shopping app. Here’s a simplified version based on the task for this lesson:

ProductCard.tsx

App.tsx

In this example, the App component manages the product’s state, including its quantity. The increaseQuantity function updates the state and is passed to ProductCard as the onIncreaseQuantity prop. When the user taps “Add to Cart,” the child calls this function, and the parent updates the quantity.

This pattern is powerful because it keeps your state and logic in one place while allowing your UI components to remain simple and focused.

When passing event handlers as props, there are a few best practices to keep in mind.

• Use clear and descriptive names for your handler props, such as onIncreaseQuantity or onAddToCart. This makes it obvious what the function does and when it should be called.
• If you’re using TypeScript, always type your props, including event handlers. This helps catch errors early and makes your code easier to understand.
• Keep your business logic in the parent component. The child should only be responsible for displaying the UI and calling the handler when the user interacts with it. This separation of concerns makes your code easier to maintain and scale.

In this lesson, you learned how to pass event handlers from parent to child components in React Native. This pattern allows child components to trigger actions or update state in their parent, keeping your code organized and maintainable. You saw how to implement this with a practical product card example and learned best practices for naming and typing your handler props.

You’re now ready to practice this pattern yourself. In the next set of exercises, you’ll apply what you’ve learned by building components that communicate through event handler props. This will help you build more interactive and flexible React Native apps. Good luck!