@ionic/react: attachProps should drop undefined

[ptmkenny]

Issue number: resolves #31344

---

What is the current behavior?

When a React component forwards an optional prop to an Ionic component and the caller
leaves it unset, @ionic/react writes the string "undefined" into the corresponding DOM
attribute.

const MyToggle: React.FC<{ id?: string }> = ({ id }) => <IonToggle id={id}>Toggle</IonToggle>;

<MyToggle />

renders:

<ion-toggle id="undefined" role="switch" aria-checked="false" aria-labelledby="ion-tg-0-lbl" tabindex="0" class="md toggle-label-placement-start toggle-ltr hydrated">Toggle</ion-toggle>

There is no error and no warning. Consequences:

• Every element rendered this way carries the same id, so any page with more than one has
  duplicate ids (invalid HTML), and document.getElementById('undefined') resolves to
  whichever comes first.
• id is not special. Any prop backed by a reflected DOM property behaves the same way:
  title={undefined} produces a tooltip that reads "undefined", and slot={undefined}
  places the element in a slot named undefined, which moves it in the layout.
• A prop that had a value and is then set to undefined is not cleared: the attribute is
  overwritten with "undefined" rather than removed.

What is the new behavior?

Skip undefined values, and treat a prop that had a value and no longer does
as a removal, which is how React handles it.

Does this introduce a breaking change?

• Yes
• No

Other information

Prepared with Claude Opus. This seems to be @ionic/react specific, as attachProps is React-only.

[vercel]

@ptmkenny is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview	Aug 11, 2026 5:03pm