72 replies

React Portal renders the element passed as children 2 times

Any idea how to get around this? Idea to troubleshoot?
I tried reproducing it on stackblitz, using the same state management library I'm using in the project (zustand) and I wasn't able to. There it renders once, as expected.
Came across this while learning E2E testing.

Here's my Portal:

"use client"

import { createPortal } from 'react-dom';
import { ReactNode, useEffect, useState } from 'react';
import React from 'react';

type PortalProps = {
  children: ReactNode;
};

export default function Portal({ children }: PortalProps) {
  const [modalElem, setModalElem] = useState<Element | null>(
    typeof document !== 'undefined' ? document.querySelector('#popup-root') : null
  );

  useEffect(() => {
    setModalElem(document.querySelector('#popup-root'));
  }, []);

  if (!modalElem) {
    return null;
  }

  return createPortal(<>{children}</>, modalElem)
}

"use client"

import { createPortal } from 'react-dom';
import { ReactNode, useEffect, useState } from 'react';
import React from 'react';

type PortalProps = {
  children: ReactNode;
};

export default function Portal({ children }: PortalProps) {
  const [modalElem, setModalElem] = useState<Element | null>(
    typeof document !== 'undefined' ? document.querySelector('#popup-root') : null
  );

  useEffect(() => {
    setModalElem(document.querySelector('#popup-root'));
  }, []);

  if (!modalElem) {
    return null;
  }

  return createPortal(<>{children}</>, modalElem)
}

the div with

#popup-root

#popup-root

is in my

layout.tsx

layout.tsx

component and the Portal is conditionally rendered using a flag from a

page.tsx

page.tsx

Solution

that's why I'd take this one step further and take the hamburger menu out of the

NavBar

NavBar

and make it a sibling component instead... so it's more clear that no one component "owns" it but any other component can open/close it

Jump to solution

TTC

Theo's Typesafe Cult•2y ago•

72 replies

beroer

React Portal renders the element passed as children 2 times

"use client"

import { createPortal } from 'react-dom';
import { ReactNode, useEffect, useState } from 'react';
import React from 'react';

type PortalProps = {
  children: ReactNode;
};

export default function Portal({ children }: PortalProps) {
  const [modalElem, setModalElem] = useState<Element | null>(
    typeof document !== 'undefined' ? document.querySelector('#popup-root') : null
  );

  useEffect(() => {
    setModalElem(document.querySelector('#popup-root'));
  }, []);

  if (!modalElem) {
    return null;
  }

  return createPortal(<>{children}</>, modalElem)
}

"use client"

import { createPortal } from 'react-dom';
import { ReactNode, useEffect, useState } from 'react';
import React from 'react';

type PortalProps = {
  children: ReactNode;
};

export default function Portal({ children }: PortalProps) {
  const [modalElem, setModalElem] = useState<Element | null>(
    typeof document !== 'undefined' ? document.querySelector('#popup-root') : null
  );

  useEffect(() => {
    setModalElem(document.querySelector('#popup-root'));
  }, []);

  if (!modalElem) {
    return null;
  }

  return createPortal(<>{children}</>, modalElem)
}

the div with

#popup-root

#popup-root

is in my

layout.tsx

layout.tsx

component and the Portal is conditionally rendered using a flag from a

page.tsx

page.tsx

Solution

that's why I'd take this one step further and take the hamburger menu out of the

NavBar

NavBar

and make it a sibling component instead... so it's more clear that no one component "owns" it but any other component can open/close it

Jump to solution

React Portal renders the element passed as children 2 times

React Portal renders the element passed as children 2 times

Similar Threads

Similar Threads

Similar Threads