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.