Holding the state in a common ancestor component
To only hold the state with the state component and props, and update it with events, we will store it in the nearest common ancestor component.
state is only propagated through props and is only updated through events. In this case, all the state components will live in a shared ancestor of the components that require them. The App component, since it is the root component, is a good default for holding a shared state.
Figure 9.3 – Common ancestor component holds state with props and event propagation
To change state, a component needs to emit events up to the component holding our state (the shared ancestor). The shared ancestor needs to update state according to the data and type of events. This, in turn, causes a re-render, during which the ancestor component passes the updated props to the component reading state.
Figure 9.4 – Updating a sibling component...