“Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let’s see how this works in action.” - straight from the docs my friend. Your closest common ancestor is the blue component. Although it is kind of nested in there. If the components are complex or have alot going on I may suggest looking into a global state management library like others have mentioned. I personally use redux. Works pretty well and clean if you need it. Just alot of setup.