modus-react-key-warnings

Modus React Key Warnings - Essential Rules

🚨 CRITICAL: React Key Props with Modus Web Components

When using Modus Web Components in React, proper key handling is essential to prevent React warnings and ensure optimal performance.

❌ NEVER Do These

1. Missing Key Props on Mapped Components

// ❌ WRONG - No key prop
{
  items.map((item) => (
    <ModusWcMenuItem label={item.label} value={item.value} />
  ));
}

// ❌ WRONG - Using index only as key
{
  items.map((item, index) => (
    <ModusWcMenuItem key={index} label={item.label} value={item.value} />
  ));
}

2. Using Slots Instead of Props for Icons

// ❌ WRONG - Using slot content causes key issues
<ModusWcMenuItem label={item.label} value={item.value}>
  {item.startIcon && (
    <i className="modus-icons" slot="start-icon">
      {item.startIcon}
    </i>
  )}
</ModusWcMenuItem>

3. Wrapping Web Components in Divs

// ❌ WRONG - Div wrapper interferes with web component
{
  items.map((item) => (
    <div key={item.value}>
      <ModusWcMenuItem label={item.label} value={item.value} />
    </div>
  ));
}

✅ ALWAYS Do These

1. Use Composite Keys for Web Components

// ✅ CORRECT - Composite key ensures uniqueness
{
  items.map((item, index) => (
    <ModusWcMenuItem
      key={`${item.value}-${index}`}
      label={item.label}
      value={item.value}
      start-icon={item.startIcon}
    />
  ));
}

2. Use Props Instead of Slots for Modus Components

// ✅ CORRECT - Use start-icon prop
<ModusWcMenuItem
  key={`${item.value}-${index}`}
  label={item.label}
  value={item.value}
  start-icon={item.startIcon}
  sub-label={item.subLabel}
  selected={item.selected}
  disabled={item.disabled}
  bordered={item.bordered}
/>

3. Handle Dynamic Content Properly

// ✅ CORRECT - Safe key generation
const generateKey = (item: MenuItem, index: number) => {
  return item.value ? `${item.value}-${index}` : `item-${index}`;
};

{
  items.map((item, index) => (
    <ModusWcMenuItem
      key={generateKey(item, index)}
      label={item.label}
      value={item.value}
    />
  ));
}