Holding State in a Common Ancestor Component

To hold state only with component state and props and update it with events, we will store it in the nearest common ancestor component.

State is propagated only through props and is updated only through events. In this case, all the state will live in a shared ancestor of the components that require state. The App component, since it is the root component, is a good default for holding shared state.

Figure 8.3: Common ancestor component holds state with props and event propagation

To change the state, a component needs to emit an event up to the component holding state (the shared ancestor). The shared ancestor needs to update state according to the event data and type. This in turn causes a re-render, during which the ancestor component passes updated props to the component reading the state.

Figure 8.4: Updating a sibling component when the ancestor holds state

To build a header...