Vigyata.AI
Is this your channel?

React 19 Tutorial - 16 - Event Handlers as Props

8.9K views· 286 likes· 10:34· Nov 17, 2025

🛍️ Products Mentioned (2)

Github - https://github.com/gopinav/React-19-Tutorials Become a Fullstack Developer with Scrimba - https://scrimba.com/fullstack-path-c0fullstack?via=Codevolution Follow me + Twitter - https://twitter.com/CodevolutionWeb Business - codevolution.business@gmail.com Event Handlers as Props in React 19

About This Video

Previously, we learned how to handle events inside a component, but in real apps you quickly hit a reuse problem. If I build a single Button component and use it in a navbar, a contact form, and a shopping cart, each click needs to do something different. The key idea is the button itself shouldn’t know anything about “sign up” or “send message” or “checkout” because that kills reusability. Instead, the parent component should control the behavior. In this lesson, I show the fundamental React pattern for child-to-parent communication: pass event handlers as props. I update an ActionButton component to accept an onClick prop and wire it directly to the button’s onClick. Then Contact passes handleSendMessage and Newsletter passes handleSubscribe, giving the same child component completely different behaviors. I also take it one step further with a MenuItem example where the child passes data (name and price) back to the parent through the event handler. The important detail is avoiding immediate invocation—wrap the call in an arrow function so React can invoke it on click. This pattern is absolutely fundamental in React and sets us up perfectly for the next topic: state.

Frequently Asked Questions

🎬 More from Codevolution