How to use Portal without rendering the parent element. (If it's a reasonable ask 😅)

[crisshaker]

Portal wraps its children in a <div /> default. This can create unnecessary markup in some cases.

In the code snippet below, I want to portal props.children directly into container without wrapping them in a parent element. I tried to use render={<React.Fragment />} to avoid creating the parent element but that didn't render children at all.

export function MainHeaderPortal(props: MainHeaderPortalProps) {
  const [container, setContainer] = React.useState<HTMLElement | null>(null);

  useLayoutEffect(() => {
    const containerElement = document.getElementById(mainHeaderSlotId);
    setContainer(containerElement);
  }, []);

  return (
    <Portal portalElement={container} render={<React.Fragment />}>
      {props.children}
    </Portal>
  );
}

I want to know if this is a reasonable ask. If so, any ideas how I can achieve this?

[diegohaz]

In that case, since you're not using any special features from Ariakit Portal, simply use ReactDOM.createPortal directly:

return createPortal(children, containerElement);

[crisshaker]

Thanks man! That makes sense!