ReactDOM.createPortal - Target container is not a DOM element. #3268

joetidee · 2018-03-23T12:53:27Z

I am using ReactDOM.createPortal to place a component into a location in the DOM. The error Target container is not a DOM element. is being thrown.

Steps to reproduce

this functional component will place a supplied component into the DOM location 'toast-container':
const Toast = ({ children }) => ReactDOM.createPortal(children, 'toast-container');

This Toast component is being included within a story:

storiesOf('Elements/Toast', module)
    .add('Test', () => (
        <InlineWrapper>
            <Toast>
                <ToastTemplate
                    id="test"
                    type='success'
                >
                Your details have been saved.
                </ToastTemplate>
            </Toast>
        </InlineWrapper>
    ));

I have defined the DOM location in the html file located at storybook/index.html and have also tried doing the same in 'storybook/iframe.html' :

<body style="margin: 0;">
    <div id="root"></div>
    <div id="toast-container"></div>
    <script src="static/bundle.js"></script>
</body>

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/react 3.2.3
@storybook/addon-options 3.2.4

The text was updated successfully, but these errors were encountered:

danielduan · 2018-03-23T18:15:28Z

The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.

https://reactjs.org/docs/portals.html

You passed in a string instead of a DOM element.

lukaskoeller · 2020-09-10T11:25:57Z

I am having the same problem but a different cause.

Can you help with that @danielduan ? Thank you in advance!

🚫 Throws Error when I want to show the Modal right away (true) without the need to first change isVisible state through an onClick event.

Target container is not a DOM element.

const [isVisible, setIsVisible] = useState(true);

✅ Works perfectly. When I click the "Open Modal" Button, the Modal opens as expected

const [isVisible, setIsVisible] = useState(false);

.storybook/preview.js

addDecorator(story => {
  const theme = useTheme(baseTheme);

  return (
    <>
      <ThemeProvider {...theme}>
        <Global styles={ css(globalStyles) } />
        <div id="app-root">
          {story()}
        </div>
        <div id="modal-root"></div>
      </ThemeProvider>
    </>
  )
});

danielduan closed this as completed Mar 23, 2018

danielduan added question / support react labels Mar 23, 2018

danielduan mentioned this issue Mar 23, 2018

Why are changes to iframe.html not coming through into the browser? #3269

Closed

This was referenced Jan 15, 2021

Update 13 dependencies from npm #2555

Merged

Update 2 dependencies from npm #2430

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReactDOM.createPortal - Target container is not a DOM element. #3268

ReactDOM.createPortal - Target container is not a DOM element. #3268

joetidee commented Mar 23, 2018 •

edited

Loading

danielduan commented Mar 23, 2018 •

edited

Loading

lukaskoeller commented Sep 10, 2020 •

edited

Loading

ReactDOM.createPortal - Target container is not a DOM element. #3268

ReactDOM.createPortal - Target container is not a DOM element. #3268

Comments

joetidee commented Mar 23, 2018 • edited Loading

Steps to reproduce

Please specify which version of Storybook and optionally any affected addons that you're running

danielduan commented Mar 23, 2018 • edited Loading

lukaskoeller commented Sep 10, 2020 • edited Loading

I am having the same problem but a different cause.

joetidee commented Mar 23, 2018 •

edited

Loading

danielduan commented Mar 23, 2018 •

edited

Loading

lukaskoeller commented Sep 10, 2020 •

edited

Loading