Callback props in React

What are Callback Props? Callback props are just regular props, but instead of passing data, they pass functions that handle specific events. What’s their exact purpose? Let’s say you have a component called A, which has a state that holds some data. Inside A, you also have another component, B, which is, for example, a Button. Now, if you want to execute a specific function when clicking the button in B, and that function should modify the state inside A, you can use callback props. This is essentially a way for components to communicate with each other. Explanation of the Example Looking at the example in the image, the idea is: When the user clicks the Button, it triggers an action that is passed as a prop (in this case, OnClickToChangeName). When rendering the Button inside the parent component (A), you pass a function (ChangeNameValue) to the OnClickToChangeName prop. This function then modifies the state of A from within B when the button is clicked. This demonstrates the benefit of callback props: allowing a child component to trigger a state update in its parent component. I d love to hear any additional insights or corrections on this topic! This is really my baby steps in React, and I found this concept a bit tricky to understand at first.

Mar 26, 2025 - 21:50

What are Callback Props?

Callback props are just regular props, but instead of passing data, they pass functions that handle specific events.

What’s their exact purpose?

Let’s say you have a component called A, which has a state that holds some data. Inside A, you also have another component, B, which is, for example, a Button.

Now, if you want to execute a specific function when clicking the button in B, and that function should modify the state inside A, you can use callback props.

This is essentially a way for components to communicate with each other.

Explanation of the Example

Looking at the example in the image, the idea is:

When the user clicks the Button, it triggers an action that is passed as a prop (in this case, OnClickToChangeName).

When rendering the Button inside the parent component (A), you pass a function (ChangeNameValue) to the OnClickToChangeName prop.

This function then modifies the state of A from within B when the button is clicked.

This demonstrates the benefit of callback props: allowing a child component to trigger a state update in its parent component.

I d love to hear any additional insights or corrections on this topic! This is really my baby steps in React, and I found this concept a bit tricky to understand at first.