Two inputs, one source of truth
Type in either box and the other follows. The parent keeps what you typed and which box you typed in; the other box is derived. Neither input has its own state.
When two components must show or change the same data, move that state up to their closest common parent and pass it down as props, with callbacks so the children can ask for changes; a component driven by props this way is called controlled.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Two LikeCounter components each keep their own count. Make them share one total in the parent, so clicking either adds to the same number shown by both.
Make a Tabs component that is controlled: it receives tabs, selected and onSelect, and renders one button per tab with aria-selected. Use it from a parent that owns the selected tab.
Explain it without notes
What does "lifting state up" mean, and when do you need it?
Describe the three steps to lift state from two sibling components.
What is the difference between a controlled and an uncontrolled component? Give an example of each.
How can one component support both controlled and uncontrolled use?
Preview
Console
Nothing logged yet.