SolidJS•2y ago

How to re-render <Portal> if target component is removed or added?

I want to use <Portal> with id to dynamically insert component to other component. The problem is the target component (mount) can be also dynamically removed or added. What should I do in this case? I found the <Portal> component is not rendered after re-adding target component after removing it.

1 Reply

REEEEE•2y ago

Store the reference to the target element in a signal and use the signal in the Portal

const [portalEl, setPortalEl] = createSignal<HTMLElement | undefined>()

const addPortal = (id: string) => {
  setPortalEl(document.getElementById(id))
}

return(
<Show when={portalEl()}>
  <Portal mount={portalEl()!} >...</Portal>
</Show>
)

const [portalEl, setPortalEl] = createSignal<HTMLElement | undefined>()

const addPortal = (id: string) => {
  setPortalEl(document.getElementById(id))
}

return(
<Show when={portalEl()}>
  <Portal mount={portalEl()!} >...</Portal>
</Show>
)

Gaming

Programming

How to re-render <Portal> if target component is removed or added?