React Component Communication
Portfolio App
Component Structure
Our 3 components before they start communicating
Grandparent -> Parent
- Grandparent defines the callback function
- Then passes it to its child (the parent)
Parent -> Child
- Grandparent defines the callback function
- Then passes it to its child (the parent)
- Parent receives the callback function from its parent (the grandparent)
- Then passes it to its child (the grandchild)
Child -> Grandparent
- Grandparent defines the callback function
- Then passes it to its child (the parent)
- Parent receives the callback function from its parent (the grandparent)
- Then passes it to its child (the grandchild)
- Grandchild receives the callback from its parent (the parent)
- Then calls the callback with arguments invoking the code defined in the grandparent
Additional resources on component communication
react-component-communication
By Mujtaba Al-Tameemi
react-component-communication
Explains how components communicate in React using props and callbacks as was demonstrated in the Portfolio React app example https://github.com/mujz/react-portfolio-app-example
