Sharing State - Venue Component

Lifting state up and passing state down

Hooks and useState work very cleanly when the state is completely encapsulated inside one component, but often components have to share state. Sometimes state is shared among just one subtree of DOM elements on the page, but sometimes state is shared across a page. I’ll talk more about this in Managing State in React, but I did want to cover the simplest version of one common scenario, where state is shared among parent and child components.

In this React pattern, when state is shared between components, and there is a common parent to all the components that need that state, the state is typically owned by the common parent. The parent sends the raw values down to the child components as props and typically also sends a function that the child components should call to change the ...