React Essentials · Props & State · Lesson 6 of 26

Lifting State Up

Concept

Lifting State Up

When two components need to share data, move the state to their closest common parent and pass it down as props.

By the end of this lesson

Explain the core idea behind Lifting State Up.
Predict output before running a change.
Test one realistic and one unusual input.
Use the result to make the next decision.

How to study this page

1. Read one concept.
2. Change the example.
3. Run, compare, and explain.
4. Complete the challenge below.

ExampleRunnable

function Parent() {
  const [value, setValue] = useState("");
  return <Child value={value} onChange={setValue} />;
}

Try it Yourself »

Self-check before continuing

Without looking at the example, describe what changes when you modify one input in Lifting State Up. Then reopen the editor and prove your explanation with a small test.

You are ready to continue when you can predict, test, and explain the result.

Your turn

Explain why state needs to live in the parent when two sibling components must stay in sync.

Loading editor…

Console

Output will appear here...