Overview

Single source of truth
- The parent <PercentageController> keeps one piece of state:
  javascript
  const [percentage, setPercentage] = useState(50);
Prop-drilling callbacks
- Each <Slider> receives the current value and an onChange handler:
  javascript
  <Slider label="Slider 1" value={percentage} onChange={setPercentage} testid="slider-1" />
- The slider calls onChange(Number(e.target.value)) on every drag, updating the parent state. Because both sliders read that same state, they stay perfectly in sync.

Key take-aways

Lift shared state to the nearest common ancestor.
Pass data down, send events up (unidirectional data flow).
A single state update re-renders all dependants, keeping UI consistent.

App.js

import PercentageController from "./PercentageController";

export default function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
      <PercentageController />
    </div>
  );
}

Browser

JavaScript Console

console.log()

statements will appear here

Overview

Single source of truth
- The parent <PercentageController> keeps one piece of state:
  javascript
  const [percentage, setPercentage] = useState(50);
Prop-drilling callbacks
- Each <Slider> receives the current value and an onChange handler:
  javascript
  <Slider label="Slider 1" value={percentage} onChange={setPercentage} testid="slider-1" />
- The slider calls onChange(Number(e.target.value)) on every drag, updating the parent state. Because both sliders read that same state, they stay perfectly in sync.

Key take-aways

Lift shared state to the nearest common ancestor.
Pass data down, send events up (unidirectional data flow).
A single state update re-renders all dependants, keeping UI consistent.

App.js

import PercentageController from "./PercentageController";

export default function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
      <PercentageController />
    </div>
  );
}

Browser

JavaScript Console

console.log()

statements will appear here