Module 3.3: Lifting State Up - The State Sharing Technique

🎯 Lesson Goals

After this lesson, you will master:

• The Data Sharing Problem: Identify scenarios where two or more sibling components need to use the same state.
• The Lifting State Up Technique: Understand the process of moving state from a child component up to its closest common ancestor component.
• Single Source of Truth: Grasp the principle of maintaining a single, reliable source of data in your application.

1. The Problem: State Only Exists Locally

In React, useState creates private state for that specific component. Other components (even sibling components right next to it) cannot access this state.

The Scenario: Imagine you have two child components:

1. InputSection: For entering a name.
2. DisplaySection: For displaying a greeting with the entered name.

If you declare the name state inside InputSection, DisplaySection won’t be able to know what name is to display it.

// ❌ Problem: DisplaySection cannot access InputSection's 'name'
function Parent() {
  return (
    <>
      <InputSection />
      <DisplaySection />
    </>
  );
}

2. The Solution: Lifting State Up

To share state between components, we must move that state up to their closest common ancestor component.

The 3-Step Process

1. Remove the state from the child components.
2. Move that state up to the common parent component.
3. Pass down the state (data) and the setter function (to update it) to the children via props.

Example Code after Lifting State:

function Parent() {
  // 1. & 2. State lives in the Parent
  const [name, setName] = useState('');
 
  return (
    <>
      {/* 3. Pass down state and setter */}
      <InputSection name={name} onNameChange={setName} />
      <DisplaySection name={name} />
    </>
  );
}

3. Hands-On Labs

3.1. Lab 1: FAQ Accordion (Exclusive Open)

Build a Frequently Asked Questions (FAQ) list.

• Requirements: At any given time, a MAXIMUM of only one answer can be open. Opening one automatically closes another.
• UI: Add a rotation effect to the arrow icon when opening/closing.

💡 Hint:

• The activeIndex state (which stores the index of the currently open panel) must reside in the parent component (Accordion).
• The parent passes down isActive (a boolean) and onToggle (a function) to each AccordionItem.
• The child simply calls onToggle() when clicked; the parent retains the decision-making power for opening/closing.

3.2. Lab 2: Live Currency Converter (Bidirectional)

Build a real-time currency conversion tool.

• Two input fields: VND and USD.
• Enter VND -> Automatically calculates USD.
• Enter USD -> Automatically calculates VND.
• Add a “Reset” button to clear both fields.

💡 Hint:

• Avoid using two separate states (vnd, usd) as this can easily lead to being out of sync.
• Instead, use a model with amount (the monetary value) and scale (the unit, ‘v’ for VND or ‘u’ for USD).
• The parent component calculates the display values for both input fields based on the current amount and scale.

4. Summary

1. Lifting State Up is a technique for moving state to a common parent component to share data among child components.
2. The parent component becomes the “Source of Truth”.
3. Child components become “Controlled Components” (controlled by props from the parent).
4. Always prioritize keeping state as low as possible; only lift up when you truly need to share it.

5. References

• React Docs - Sharing State Between Components