In a react application information can be passed down from parent to children components through props. This is a straightforward and easy way for a child component to have access to information that you want it to have. The issue comes when you want to have the child component give information back to the parent. That is where callback functions save the day. It still involves passing props to the child, however what is passed is a little different. The main purpose of a callback function is to change part of the state that is stored in the parent component. Instead of passing a piece of information down to the child we can pass down a callback function. The flow is like this:
- The state is set in the parent component.
- The function that is to be passed down is written.
- The function is passed down to the child component via props.
- The passed down function is used in the child component usually through some interaction in the component
- When the function is called in the child component the new state is passed up to the parent and the parent’s state is changed.
This is how a child component can pass information up to the parent. It all starts with the parent passing down a function to the child as a prop that, when it gets called, changes the state of the parent.
