▶️ Live demo

Try it yourself — interact with the example below.

Loading demo…

Open demo in a new tab

🎯 What Is Lifting State Up?

Imagine you and your friend at a restaurant splitting a bill:

WITHOUT LIFTING STATE UP (Everyone Tracks Their Own):
┌─────────────────────────────────────────┐
│  🍽️ THE RESTAURANT (Your App)           │
│                                         │
│  ┌─────────────┐  ┌─────────────┐      │
│  │ You         │  │ Your Friend  │      │
│  │             │  │             │      │
│  │ Bill: $100  │  │ Bill: ???   │      │
│  │ Tip: 10%    │  │ Tip: 0%     │      │
│  │             │  │             │      │
│  │ You can't   │  │ Friend can't│      │
│  │ see friend's│  │ see yours!  │      │
│  │ tip!        │  │             │      │
│  └─────────────┘  └─────────────┘      │
│                                         │
│  ❌ No one can calculate the total!     │
│  ❌ Each person has their own data!     │
│  ❌ Components can't talk to siblings!  │
└─────────────────────────────────────────┘

WITH LIFTING STATE UP (One Person Holds the Bill):
┌─────────────────────────────────────────┐
│  🍽️ THE RESTAURANT (Your App)           │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  🧾 THE WAITER (TipCalculator)   │   │
│  │     Holds the bill & all tips!   │   │
│  │     (State lives here!)            │   │
│  └─────────────────────────────────┘   │
│              │              │          │
│              ▼              ▼          │
│  ┌─────────────┐    ┌─────────────┐   │
│  │ You         │    │ Your Friend  │   │
│  │ says:       │    │ says:       │   │
│  │ "I tip 10%" │    │ "I tip 0%"  │   │
│  │             │    │             │   │
│  │ You tell    │    │ Friend tells│   │
│  │ waiter      │    │ waiter      │   │
│  │ (via props) │    │ (via props) │   │
│  └─────────────┘    └─────────────┘   │
│              │              │          │
│              ▼              ▼          │
│  ┌─────────────────────────────────┐   │
│  │  🧾 THE WAITER CALCULATES:      │   │
│  │     Average tip = (10+0)/2 = 5% │   │
│  │     Total = $100 + $5 = $105    │   │
│  │     (Derived state!)              │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ✅ Only ONE source of truth!           │
│  ✅ Everyone reports to the waiter!     │
│  ✅ Calculation happens in ONE place!   │
│  ✅ All components stay in sync!        │
└─────────────────────────────────────────┘

THE LIFTING STATE UP DECISION FLOWCHART:
┌─────────────────────────────────────────┐
│  Do multiple components need this state? │
│    ↓                                    │
│  Are they siblings? (same level)          │
│    → NO → Keep it where it is!          │
│    → YES → Find closest common parent!  │
│      → Move state there!                │
│      → Pass state down to children      │
│        that need to READ it             │
│      → Pass updater function down to    │
│        children that need to CHANGE it    │
│      → Parent calculates derived values!  │
│      → Everyone stays in sync! ✓        │
└─────────────────────────────────────────┘

---

⚠️ The Big Problem: "State Trapped in Children"

// ==========================================
// THE "TRAPPED STATE" TRAP (Wrong Way)
// ==========================================

// ❌ WRONG: Each input has its OWN state
function BadTipCalculator() {
  return (
    <div>
      <BadBillInput />        {/* Has bill state */}
      <BadSelectPercentage /> {/* Has percentage1 state */}
      <BadSelectPercentage /> {/* Has percentage2 state */}
      {/* No one can calculate the total! */}
    </div>
  );
}

function BadBillInput() {
  const [bill, setBill] = useState(''); // ← Trapped here!

  return (
    <div>
      <label>How much was the bill?</label>
      <input 
        value={bill}
        onChange={(e) => setBill(e.target.value)}
      />
    </div>
  );
}

function BadSelectPercentage() {
  const [percentage, setPercentage] = useState(0); // ← Trapped here!

  return (
    <div>
      <label>How did you like the service?</label>
      <select 
        value={percentage}
        onChange={(e) => setPercentage(Number(e.target.value))}
      >
        <option value="0">Dissatisfied (0%)</option>
        <option value="5">It was okay (5%)</option>
        <option value="10">It was good (10%)</option>
        <option value="20">Absolutely amazing (20%)</option>
      </select>
    </div>
  );
}

// What happens:
// 1. User types $100 in BadBillInput
// 2. $100 is trapped in BadBillInput's state
// 3. BadTipCalculator (parent) has NO IDEA what the bill is!
// 4. User selects 10% in first BadSelectPercentage
// 5. 10% is trapped in that component's state
// 6. User selects 0% in second BadSelectPercentage
// 7. 0% is trapped in that component's state
// 8. NO ONE can calculate: $100 + average tip!
// 9. Output component can't display anything!

// Problems:
// 1. State is trapped in children
// 2. Parent can't calculate the total
// 3. Siblings can't share data
// 4. No single source of truth

// ==========================================
// THE SOLUTION: Lift State Up to Parent
// ==========================================

// ✅ CORRECT: State in parent, passed down to children
function GoodTipCalculator() {
  // 🏠 STATE LIVES IN PARENT (TipCalculator)
  const [bill, setBill] = useState('');           // Bill amount
  const [percentage1, setPercentage1] = useState(0); // My tip %
  const [percentage2, setPercentage2] = useState(0); // Friend's tip %

  // Derived state - calculated from existing state!
  const tip = bill * ((percentage1 + percentage2) / 2 / 100);
  const total = Number(bill) + tip;

  return (
    <div>
      <BillInput 
        bill={bill}           // ← Pass state DOWN (read)
        onSetBill={setBill}   // ← Pass setter DOWN (write)
      />
      
      <SelectPercentage 
        percentage={percentage1}  // ← Pass state DOWN
        onSelect={setPercentage1} // ← Pass setter DOWN
      >
        How did you like the service?
      </SelectPercentage>
      
      <SelectPercentage 
        percentage={percentage2}  // ← Pass state DOWN
        onSelect={setPercentage2} // ← Pass setter DOWN
      >
        How did your friend like the service?
      </SelectPercentage>
      
      {/* Output reads from parent's derived state */}
      <Output bill={bill} tip={tip} total={total} />
      
      {/* Reset calls parent's state setters */}
      <Reset onReset={handleReset} />
    </div>
  );
}

---

📋 Complete Visual Examples

The Data Flow:

┌─────────────────────────────────────────┐
│  TipCalculator (Parent)                 │
│  const [bill, setBill] = useState('')   │
│  const [p1, setP1] = useState(0)         │
│  const [p2, setP2] = useState(0)         │
│                                         │
│  const tip = bill * ((p1+p2)/2/100)     │
│  const total = bill + tip                │
│                                         │
│  │                                      │
│  ├─── bill={bill} ───────► BillInput   │
│  │    onSetBill={setBill} ───► "Show $100│
│  │                            User types │
│  │                            Tell parent│
│  │                                      │
│  ├─── percentage={p1} ───► Select%     │
│  │    onSelect={setP1} ────► "Show 10%  │
│  │                            User picks │
│  │                            Tell parent│
│  │                                      │
│  ├─── percentage={p2} ───► Select%     │
│  │    onSelect={setP2} ────► "Show 0%   │
│  │                            User picks │
│  │                            Tell parent│
│  │                                      │
│  ├─── bill={bill} ───────► Output      │
│  │    tip={tip} ──────────► "Show $105  │
│  │    total={total}                    │
│  │                                      │
│  └─── onReset={handleReset} ──► Reset  │
│       "Clear everything!"               │
│                                         │
│  User types $100:                       │
│  1. BillInput calls onSetBill(100)      │
│  2. Parent's setBill(100) runs          │
│  3. Parent re-renders with bill=100     │
│  4. All children receive new bill prop    │
│  5. Output recalculates: tip = $5        │
│  6. Output shows: "You pay $105"        │
└─────────────────────────────────────────┘

---

🚀 Complete Working Code

import { useState } from 'react';

// ==========================================
// PARENT COMPONENT - The "Brain"
// ==========================================

function TipCalculator() {
  // 🏠 ALL STATE LIVES IN PARENT (lifted up from children)
  const [bill, setBill] = useState('');              // Bill amount (starts empty)
  const [percentage1, setPercentage1] = useState(0); // My tip % (starts 0)
  const [percentage2, setPercentage2] = useState(0);   // Friend's tip % (starts 0)

  // Derived state - calculated from existing state (NOT stored separately!)
  const tip = bill * ((percentage1 + percentage2) / 2 / 100);
  const total = Number(bill) + tip;

  // Reset all values back to initial state
  function handleReset() {
    setBill('');
    setPercentage1(0);
    setPercentage2(0);
  }

  return (
    <div className="container py-5" style={{ maxWidth: '500px' }}>
      <h2 className="mb-4">🧾 Tip Calculator</h2>
      
      {/* Bill Input - receives value and updater */}
      <BillInput bill={bill} onSetBill={setBill} />
      
      {/* Select Percentage - reused twice with different text! */}
      <SelectPercentage 
        percentage={percentage1} 
        onSelect={setPercentage1}
      >
        How did you like the service?
      </SelectPercentage>
      
      <SelectPercentage 
        percentage={percentage2} 
        onSelect={setPercentage2}
      >
        How did your friend like the service?
      </SelectPercentage>
      
      {/* Only show output and reset if bill > 0 */}
      {bill > 0 && (
        <>
          <Output bill={Number(bill)} tip={tip} total={total} />
          <Reset onReset={handleReset} />
        </>
      )}
    </div>
  );
}

// ==========================================
// CHILD COMPONENT 1: Bill Input
// ==========================================

function BillInput({ bill, onSetBill }) {
  return (
    <div className="mb-3">
      <label className="form-label fw-bold">How much was the bill?</label>
      <input
        type="text"
        className="form-control"
        placeholder="Bill value"
        value={bill}  // Controlled by parent
        onChange={(e) => onSetBill(Number(e.target.value))}  // Tell parent to update
      />
    </div>
  );
}

// ==========================================
// CHILD COMPONENT 2: Select Percentage (REUSABLE!)
// ==========================================

function SelectPercentage({ children, percentage, onSelect }) {
  return (
    <div className="mb-3">
      <label className="form-label fw-bold">{children}</label>
      <select 
        className="form-select"
        value={percentage}  // Controlled by parent
        onChange={(e) => onSelect(Number(e.target.value))}  // Tell parent to update
      >
        <option value="0">Dissatisfied (0%)</option>
        <option value="5">It was okay (5%)</option>
        <option value="10">It was good (10%)</option>
        <option value="20">Absolutely amazing (20%)</option>
      </select>
    </div>
  );
}

// ==========================================
// CHILD COMPONENT 3: Output Display
// ==========================================

function Output({ bill, tip, total }) {
  return (
    <div className="alert alert-info mb-3">
      <h5 className="mb-0">
        You pay ${total} (${bill} + ${tip} tip)
      </h5>
    </div>
  );
}

// ==========================================
// CHILD COMPONENT 4: Reset Button
// ==========================================

function Reset({ onReset }) {
  return (
    <button className="btn btn-warning w-100" onClick={onReset}>
      Reset
    </button>
  );
}

export default TipCalculator;

---

🧠 Memory Aids for Poor Logic Thinking

The "Restaurant Waiter" Analogy

┌─────────────────────────────────────────────────┐
│  LIFTED STATE = THE WAITER HOLDS THE CHECK       │
│                                                 │
│  BEFORE (Everyone has their own receipt):         │
│  ┌─────────────────────────────────────────┐    │
│  │  You: "I owe $100" 📄                  │    │
│  │  Friend: "I owe... wait, what?"          │    │
│  │                                          │    │
│  │  You: "I want to tip 10%"               │    │
│  │  Friend: "I want to tip 0%"             │    │
│  │                                          │    │
│  │  NO ONE knows the total!               │    │
│  │  Can't calculate tip!                  │    │
│  │  Can't split the bill!                 │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  AFTER (Waiter holds everything):               │
│  ┌─────────────────────────────────────────┐    │
│  │  🧾 WAITER (TipCalculator)              │    │
│  │     Holds: bill, tip1, tip2             │    │
│  │                                          │    │
│  │  You tell waiter: "Bill is $100"       │    │
│  │  → Waiter writes it down (setBill)      │    │
│  │                                          │    │
│  │  You tell waiter: "I tip 10%"          │    │
│  │  → Waiter writes it down (setP1)        │    │
│  │                                          │    │
│  │  Friend tells waiter: "I tip 0%"       │    │
│  │  → Waiter writes it down (setP2)        │    │
│  │                                          │    │
│  │  Waiter calculates:                     │    │
│  │    Average = (10 + 0) / 2 = 5%         │    │
│  │    Tip = $100 × 5% = $5                │    │
│  │    Total = $100 + $5 = $105            │    │
│  │                                          │    │
│  │  Waiter announces: "You pay $105!"     │    │
│  │  → Everyone hears the same number!     │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  You = BillInput + SelectPercentage            │
│  Friend = SelectPercentage                     │
│  Waiter = TipCalculator (parent with state)    │
│  Announcement = Output component               │
└─────────────────────────────────────────────────┘

The "Bank Account" Analogy

┌─────────────────────────────────────────────────┐
│  CONTROLLED COMPONENTS = BANK TELLER SYSTEM      │
│                                                 │
│  You (the input) want to withdraw money:      │
│  ┌─────────────────────────────────────────┐    │
│  │  💰 THE BANK (React State)              │    │
│  │     balance = $1000                     │    │
│  │                                          │    │
│  │  You fill out form: "I want $500"      │    │
│  │  → Form shows $500 (value={balance})   │    │
│  │                                          │    │
│  │  BUT the bank hasn't approved it yet!   │    │
│  │  → onChange tells bank: "User wants $500"│   │
│  │                                          │    │
│  │  Bank updates: balance = $500          │    │
│  │  → Form now shows $500 (new value prop) │    │
│  │                                          │    │
│  │  The form CANNOT change by itself!     │    │
│  │  It MUST ask the bank (state) first!   │    │
│  │                                          │    │
│  │  value={state} + onChange={setState}   │    │
│  │  = CONTROLLED COMPONENT                  │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  Uncontrolled = You keep cash under mattress   │
│  Controlled = Money in bank, you use debit card │
└─────────────────────────────────────────────────┘

The "Derived State" Analogy

┌─────────────────────────────────────────────────┐
│  DERIVED STATE = RECIPE INGREDIENTS              │
│                                                 │
│  You have ingredients (state):                  │
│  ┌─────────────────────────────────────────┐    │
│  │  🥚 INGREDIENTS (State)                 │    │
│  │     flour = 2 cups                      │    │
│  │     eggs = 3                            │    │
│  │     sugar = 1 cup                       │    │
│  │                                          │    │
│  │  You DON'T store "cake" separately!    │    │
│  │  You bake it when needed!              │    │
│  │                                          │    │
│  │  const cake = bake(flour, eggs, sugar) │    │
│  │  → Calculate on the fly!                 │    │
│  │                                          │    │
│  │  If flour changes → cake recalculates  │    │
│  │  If eggs change → cake recalculates    │    │
│  │  ALWAYS correct! NEVER out of sync!    │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  In React:                                      │
│  const [bill, setBill] = useState(100)         │
│  const [p1, setP1] = useState(10)              │
│  const [p2, setP2] = useState(0)              │
│                                                 │
│  const tip = bill * ((p1 + p2) / 2 / 100)     │
│  → tip is "baked" from bill, p1, p2            │
│  → No need to store tip in state!              │
│  → Automatically updates when inputs change!   │
└─────────────────────────────────────────────────┘

The "Props Passing" Analogy

┌─────────────────────────────────────────────────┐
│  PROPS = PASSING NOTES IN CLASS                  │
│                                                 │
│  Teacher (Parent) writes a note:                │
│  ┌─────────────────────────────────────────┐    │
│  │  👨‍🏫 TEACHER (TipCalculator)           │    │
│  │                                          │    │
│  │  Note to Student A: "The answer is 42"   │    │
│  │  → bill={42}                            │    │
│  │                                          │    │
│  │  Note to Student B: "Tell me if you     │    │
│  │  change your mind"                       │    │
│  │  → onSelect={setPercentage1}              │    │
│  │                                          │    │
│  │  Student A reads note: "Oh, answer is 42"│   │
│  │  → const { bill } = props               │    │
│  │                                          │    │
│  │  Student B has idea: "I choose 10%!"     │    │
│  │  → Writes back to teacher: onSelect(10)  │    │
│  │                                          │    │
│  │  Teacher updates grade book: setP1(10)   │    │
│  │  → Re-calculates class average!          │    │
│  │  → Sends new notes to ALL students!     │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  Props = One-way street (Parent → Child)       │
│  Functions = Return street (Child → Parent)     │
│  Re-render = Teacher sends updated notes!      │
└─────────────────────────────────────────────────┘

The "Children Prop" Analogy

┌─────────────────────────────────────────────────┐
│  CHILDREN PROP = ENVELOPE WITH CUSTOM LETTER   │
│                                                 │
│  You buy a greeting card (component):           │
│  ┌─────────────────────────────────────────┐    │
│  │  📨 THE ENVELOPE (SelectPercentage)     │    │
│  │     Same envelope for everyone!          │    │
│  │     Same structure, same stamps!        │    │
│  │                                          │    │
│  │  But the LETTER inside is different!    │    │
│  │                                          │    │
│  │  Envelope 1:                            │    │
│  │  <SelectPercentage>                     │    │
│  │    How did you like the service?        │    │
│  │  </SelectPercentage>                    │    │
│  │  → children = "How did you like..."      │    │
│  │                                          │    │
│  │  Envelope 2:                            │    │
│  │  <SelectPercentage>                     │    │
│  │    How did your friend like...          │    │
│  │  </SelectPercentage>                    │    │
│  │  → children = "How did your friend..."  │    │
│  │                                          │    │
│  │  Same component, different content!      │    │
│  │  Reusable! Flexible! Powerful!           │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  Whatever is between opening and closing tags   │
│  becomes the "children" prop automatically!     │
└─────────────────────────────────────────────────┘

---

🎓 Practice Exercises

Exercise 1: Identify Where State Should Live

Look at this component tree. Where should each piece of state live?

App
├── TipCalculator
│   ├── BillInput
│   ├── SelectPercentage (You)
│   ├── SelectPercentage (Friend)
│   ├── Output
│   └── Reset

Questions:

1. Which component needs to know the bill amount? → Output needs to display it
2. Are BillInput and Output siblings? → Yes!
3. What's their common parent? → TipCalculator
4. Should BillInput have its own bill state? → No! Lift it up!

Solution:

function TipCalculator() {
  // 🏠 STATE LIVES IN PARENT (TipCalculator)
  const [bill, setBill] = useState('');
  const [percentage1, setPercentage1] = useState(0);
  const [percentage2, setPercentage2] = useState(0);

  const tip = bill * ((percentage1 + percentage2) / 2 / 100);

  return (
    <div>
      <BillInput bill={bill} onSetBill={setBill} />
      <SelectPercentage percentage={percentage1} onSelect={setPercentage1}>
        How did you like the service?
      </SelectPercentage>
      <SelectPercentage percentage={percentage2} onSelect={setPercentage2}>
        How did your friend like the service?
      </SelectPercentage>
      <Output bill={bill} tip={tip} />
      <Reset onReset={handleReset} />
    </div>
  );
}

---

Exercise 2: Fix the Broken Controlled Input

This code has a bug - the input doesn't update when you type. Fix it!

function BillInput({ bill, onSetBill }) {
  return (
    <div>
      <label>How much was the bill?</label>
      <input
        type="text"
        placeholder="Bill value"
        // TODO: Add value and onChange
      />
    </div>
  );
}

Solution:

function BillInput({ bill, onSetBill }) {
  return (
    <div>
      <label>How much was the bill?</label>
      <input
        type="text"
        placeholder="Bill value"
        value={bill}  // ✅ Controlled by parent
        onChange={(e) => onSetBill(Number(e.target.value))}  // ✅ Tell parent
      />
    </div>
  );
}

---

Exercise 3: Build a Simple Counter with Lifted State

Build a counter where two buttons share the same count:

function App() {
  // TODO: Add state for count
  // TODO: Pass count and setter to both buttons
  
  return (
    <div>
      {/* Your code here */}
    </div>
  );
}

// Two CounterButton components that share state
function CounterButton({ label, count, onIncrement }) {
  return (
    <button onClick={onIncrement}>
      {label}: {count}
    </button>
  );
}

Solution:

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <CounterButton 
        label="Button A" 
        count={count} 
        onIncrement={handleIncrement} 
      />
      <CounterButton 
        label="Button B" 
        count={count} 
        onIncrement={handleIncrement} 
      />
      <p>Total clicks: {count}</p>
    </div>
  );
}

function CounterButton({ label, count, onIncrement }) {
  return (
    <button className="btn btn-primary m-2" onClick={onIncrement}>
      {label}: {count}
    </button>
  );
}

---

Exercise 4: Add a Third Person to the Tip Calculator

Add a third SelectPercentage for a third friend:

function TipCalculator() {
  const [bill, setBill] = useState('');
  const [percentage1, setPercentage1] = useState(0);
  const [percentage2, setPercentage2] = useState(0);
  // TODO: Add percentage3 state

  // TODO: Update tip calculation for 3 people
  const tip = bill * ((percentage1 + percentage2) / 2 / 100);

  return (
    <div>
      <BillInput bill={bill} onSetBill={setBill} />
      <SelectPercentage percentage={percentage1} onSelect={setPercentage1}>
        How did you like the service?
      </SelectPercentage>
      <SelectPercentage percentage={percentage2} onSelect={setPercentage2}>
        How did your friend like the service?
      </SelectPercentage>
      {/* TODO: Add third SelectPercentage */}
      <Output bill={Number(bill)} tip={tip} />
    </div>
  );
}

Solution:

function TipCalculator() {
  const [bill, setBill] = useState('');
  const [percentage1, setPercentage1] = useState(0);
  const [percentage2, setPercentage2] = useState(0);
  const [percentage3, setPercentage3] = useState(0); // ✅ Added

  // ✅ Updated for 3 people: divide by 3
  const tip = bill * ((percentage1 + percentage2 + percentage3) / 3 / 100);
  const total = Number(bill) + tip;

  return (
    <div>
      <BillInput bill={bill} onSetBill={setBill} />
      <SelectPercentage percentage={percentage1} onSelect={setPercentage1}>
        How did you like the service?
      </SelectPercentage>
      <SelectPercentage percentage={percentage2} onSelect={setPercentage2}>
        How did your friend like the service?
      </SelectPercentage>
      <SelectPercentage percentage={percentage3} onSelect={setPercentage3}>
        How did your other friend like the service?
      </SelectPercentage>
      <Output bill={Number(bill)} tip={tip} total={total} />
    </div>
  );
}

---

💡 Key Takeaways

Concept	What It Means	Example
Components	Reusable building blocks	BillInput, SelectPercentage, Output, Reset
Props	Pass data down (parent → child)	bill={bill}, percentage={p1}
State	Component memory	const [bill, setBill] = useState('')
Controlled Components	React owns the input completely	value={bill} + onChange={onSetBill}
Lifting State Up	Move state to common parent	bill moved from BillInput to TipCalculator
Derived State	Calculate from existing state	const tip = bill * ((p1+p2)/2/100)
Conditional Rendering	Show/hide with &&	{bill > 0 && <><Output /><Reset /></>}
Children Prop	Content between tags	<SelectPercentage>Text here</SelectPercentage>
Reusability	Same component, different props	SelectPercentage used twice
Fragment <></>	Invisible wrapper for multiple elements	<>...</> wraps Output + Reset

The Lifting State Up Pattern:

function Parent() {
  const [sharedState, setSharedState] = useState(initialValue);

  return (
    <div>
      <ChildA 
        value={sharedState}
        onUpdate={setSharedState}
      />
      <ChildB 
        value={sharedState}
        onUpdate={setSharedState}
      />
      <Display derivedValue={calculate(sharedState)} />
    </div>
  );
}

Golden Rules:

1. One component per piece — BillInput, SelectPercentage, Output, Reset
2. Lift state to common parent — When siblings need to share data
3. Pass state down as props — For children to READ
4. Pass functions down as props — For children to WRITE (update)
5. Use controlled elements — Always pair value with onChange
6. Use derived state — Calculate tip from bill and percentages
7. Use Number() conversion — Inputs are strings, math needs numbers
8. Use && for conditional rendering — Show output only when bill > 0
9. Use <></> fragments — Wrap multiple elements without extra HTML
10. Reuse components — Same SelectPercentage with different children

One Sentence Summary: > "The Tip Calculator teaches you to build small reusable components, lift their state up to a common parent so all siblings can stay in sync, pass data down through props and updater functions down through props, use controlled inputs so React manages every keystroke, calculate derived values like tip instead of storing them in state, conditionally render output only when there's a bill to calculate, and use the children prop to make components flexible and reusable — all while keeping one single source of truth in the parent component!"