Lesson 15 — Lifting state up

Put state where it is shared

When two components need the same data, move the state up to their closest common parent. The parent passes the value down as a prop, and passes a callback (a function prop, often named onSomething) so a child can ask the parent to change it.

function Child({ onPick }) {
  return <button onClick={() => onPick("red")}>Red</button>;
}

Why it matters: this "data down, events up" flow is how React apps keep every part of the screen in sync.