modus-accordion-state-management-react

Modus Accordion State Management in React

🚨 IMPORTANT: Accordion State Management Guidelines

Key Principle: Modus Web Components (ModusWcAccordion, ModusWcCollapse) are designed to manage their own state, but they DO support controlled state when needed.

Best Practice: Use the expanded attribute on ModusWcCollapse components for initial state or programmatic control, but avoid trying to synchronize React state with Modus state in real-time.

❌ Common Anti-Patterns

❌ Real-time State Synchronization

// ❌ WRONG: Trying to sync React state with Modus state in real-time
function AccordionComponent() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <ModusWcAccordion
      onExpandedChange={(e) => setIsExpanded(e.detail.expanded)} // ❌ Creates state loop
    >
      <ModusWcCollapse expanded={isExpanded}>
        {" "}
        {/* ❌ This causes conflicts */}
        <div slot="content">Content</div>
      </ModusWcCollapse>
    </ModusWcAccordion>
  );
}

❌ Complex State Synchronization

// ❌ WRONG: Complex state synchronization that can cause loops
function MyComponent() {
  const [accordionStates, setAccordionStates] = useState({
    accordion1: false,
    accordion2: true,
    accordion3: false,
  });

  const toggleAccordion = (id: string) => {
    setAccordionStates((prev) => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  return (
    <div>
      {Object.entries(accordionStates).map(([id, isExpanded]) => (
        <ModusWcAccordion
          key={id}
          onExpandedChange={() => toggleAccordion(id)} // ❌ Creates state loops
        >
          <ModusWcCollapse expanded={isExpanded}>
            {" "}
            {/* ❌ This can cause conflicts */}
            <div slot="content">Content for {id}</div>
          </ModusWcCollapse>
        </ModusWcAccordion>
      ))}
    </div>
  );
}

✅ Correct Patterns

✅ Let Modus Components Manage Their Own State