To share data between React components, move the shared state into their closest common parent, then pass the current value and any update callbacks down as props. The parent becomes the single source of truth for that value, so sibling components stay coordinated after a change.
Why independent child state cannot keep siblings in sync
A component owns the state it declares. If two child components each store their own isActive boolean, each can open or close independently; neither child’s state automatically updates the other. A parent also cannot directly change a child’s private local state. To coordinate the children, move the shared value to a component that contains both.
As an Amazon Associate I earn from qualifying purchases.
How to lift state to the common parent
- Make the children receive the shared value as a prop. Remove the duplicated
isActivestate from each panel and let each panel render based on itsisActiveprop. - Find the closest common parent. In an accordion, the component rendering both panels is the natural owner of their shared selection.
- Store the value in that parent and pass it down. The parent derives each child’s prop from its state and supplies an event handler such as
onShow. - Have the child request changes through the handler. When a user selects a panel, the child calls the callback; the parent updates its state and React renders the children with the new props.
This is the pattern React calls “lifting state up”: state moves from coordinated children to their common parent, while props and callbacks carry data and update requests in the opposite direction. See React’s guide to sharing state between components.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Choose state that makes the interface rule explicit
Only one accordion panel may be open
If the interface allows only one open panel at a time, keep one selection in the parent, such as activeIndex, rather than separate booleans. For two panels, the first can be active when activeIndex === 0, and the second when activeIndex === 1. Selecting a panel sets that single value. This state shape represents the rule directly: there is only one active selection.
#1 Best Overall
Two inputs must show the same text
For synchronized inputs, store one text value in their common parent and pass that value and a change handler to both inputs. Editing either input requests an update to the parent’s value; on the next render, both receive the same text. Separate state values would require extra coordination and could drift apart.
Which component should own a piece of state?
React’s guidance is to choose one owner for each unique piece of state: “For each unique piece of state, you will choose the component that ‘owns’ it.” The owner should be the component that can coordinate the relevant consumers without placing the value unnecessarily high in the tree. State that no other component needs can remain local to a leaf; lifting state does not mean moving all application state to the root. React explains this ownership principle in its state-sharing guide and its Thinking in React guide.
A component whose important information is driven by props is often called controlled; one that manages that information with its own state is often called uncontrolled. These terms describe useful design patterns, not rigid technical categories. A component can receive props while still keeping unrelated local state.
When props are enough—and when to consider context
For a few nearby siblings, props make the relationship easy to see: the parent owns the value, and children receive it along with callbacks for requesting changes. If many layers sit between the owner and the components that need the value, forwarding the same prop through each intermediate component can become cumbersome. React calls this prop drilling and documents context as an option for making information available to deeper descendants without passing it through every layer.
Context is a boundary to consider when repeated forwarding becomes inconvenient, not an automatic replacement for lifting state. The choice is about the shape and reach of the data flow; the cited React guidance does not establish a performance advantage for context over props.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Quick decision guide
| Situation | Where the value belongs | How components receive it |
|---|---|---|
| One component uses a value privately | Keep it in that component | Local state |
| Nearby siblings must coordinate one value | Their closest common parent | Pass the value and callbacks as props |
| Many deeper descendants need a value and repeated prop forwarding is awkward | Choose an appropriate provider/owner in the tree | Consider context |
The examples and principles above are presented in React’s official learning documentation, which does not identify a specific React version on the cited pages. For current wording and examples, consult the live documentation links.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
