I am using a method to render some list items.
Assuming the part.isAvailable = false the second ion-item should never be visible.
But the framework is injecting the hydrated class event when it should not be used and the element is always visible.
How to prevent the hydrated class on start?
function renderPart(view: QuoteAnswersView, part: IPart, dismantlingId: string): JSX.Element {
return ([
<ion-item class="item-label item ios in-list ion-focusable hydrated" id={part.id}>
<ion-toggle checked={part.isAvailable} slot="start"
onIonChange={(e: CustomEvent<ToggleChangeEventDetail>) => view.partChanged(part, e.detail.checked)}></ion-toggle>
<ion-label class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated">{part.name}</ion-label>
</ion-item>,
<ion-item class={part.isAvailable == true ? 'item-label item ios in-list ion-focusable hydrated' : 'item-label item ios in-list ion-focusable inactive'}>
<ion-icon name="logo-usd"></ion-icon> {part.isAvailable.toString()} <ion-input value="{part.price}"
ref={(el: HTMLIonInputElement) => MoneyInput.mask(el)}
onIonChange={(e: CustomEvent<InputChangeEventDetail>) => view.partPriceChanged(part, dismantlingId, e)}></ion-input>
</ion-item>
]);
}