# Use React Portal in Remix

Used: remix-utils@7.0.0

Because [React Portals](https://react.dev/reference/react-dom/createPortal) needs an actual DOM element where to be attached, we can't just use them in a Remix app because when doing Server-Side Rendering it will fail since there's no DOM.

We can solve this by using [Remix Utils' ClientOnly](https://github.com/sergiodxa/remix-utils#clientonly).

```ts {% path="app/routes/something.tsx" %}
import { ClientOnly } from "remix-utils/client-only";

export default function Component() {
  return (
    <ClientOnly>
      {() => createPortal(<Modal />, document.getElementById('modal-portal')}
    </ClientOnly>
  )
}
```

With this we'll delay the rendering to the Modal inside a Portal until hydration happens client-side.