Back to case studies
ReactFundamental

Lifting state up between sibling components

Scenario

Context Two sibling components — a temperature input and a unit selector — need to stay in sync with each other. The Problem Each component manages its own local state independently, so changing the unit in one component does not update the displayed value in the other. Constraints Move the shared state to the closest common parent. Pass state and setter functions down as props. Do not use any global state library. Expected Deliverable A React implementation of the state lifting pattern, where a parent component coordinates state between two sibling components through props.

Targeted skills

reactstate-liftingsibling-componentspropsusestate
    Lifting state up between sibling components — React hands-on scenario | CodeDuel