Skip to content

React-bootstrap duplicates a <Modal/> on dom. #2730

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
soulclown opened this issue Jul 24, 2017 · 15 comments
Closed

React-bootstrap duplicates a <Modal/> on dom. #2730

soulclown opened this issue Jul 24, 2017 · 15 comments

Comments

@soulclown
Copy link

soulclown commented Jul 24, 2017 •
edited
Loading

I noticed a strange behaviour .
When i render a Modal component, it is duplicated.

I noticed i'm not the only one who got this problem:
https://stackoverflow.com/questions/44761650/react-bootstrap-duplicated-modal-components

Any tips how to fix the issue?

Thank you,
Andrea.
@taion
Copy link
Member

taion commented Jul 24, 2017

This is most likely a bug in your code, where you're mounting your component that renders the modal more than once. If you have a repro, though, we'd be glad to look at it.

@taion taion closed this as completed Jul 24, 2017
@soulclown
Copy link
Author

soulclown commented Jul 25, 2017 •
edited
Loading

I'm not sure that is a bug in our project code, I realize this happens when you declare a Modal inside a wrapper, for example:

const ChildrenWrapper = ({children}) => {
  return <div>{children}</div>
}

And the modal is a child in the wrapper:

const ModalWrapped= ({}) => {
return <ChildrenWrapper>
                 <Modal show={true}>some content</Modal>
           </ChildrenWrapper>
}

Than the App :

const App = () => {
   return <ModalWrapped/>
}

The result is that the instance of the Modal is rendered 2 times in the virtual dom.

I'm very curious to discuss about this approach :)
Thanks a lot for your answer.

@jquense
Copy link
Member

jquense commented Jul 25, 2017

IS there actually two Modals or do you only see 2 in the React Devtools? The latter case is probably due to Modals using a portal to render the DOM components outside the body of the document, and so you see two things called "Modal" but really it's two different parts of the Modal with the same name.

@soulclown
Copy link
Author

soulclown commented Jul 25, 2017 •
edited
Loading

It's actually 2 modals, this is the final virtual dom:

<body>
  <div id="root"></div>  // app root
  <script src="/main.js"></script>  // webpack bundle
  <div>...</div> // first modal rendered
  <div>...</div> // second time same modal rendered
</body>

Can be possible that <Modal/> component is rendered first time when is founded in the return statement of <ModalWrapped/> , than the second time once the <ChildrenWrapper/> renders its own children?
I hope I answered your question. :)

@flygis
Copy link

flygis commented Oct 20, 2017

I am having this issue as well, and my modal is only wrapped by the container component. I have a strong feeling that it is not because of my code, but I can't be sure. Hard bug to trace.

@soulclown
Copy link
Author

I solved the issue moving all modals to a top level, controlling them with a state manager instead (Redux or MobX).

@flygis
Copy link

flygis commented Oct 20, 2017

I am using redux, I can't move the modal anywhere higher, though.

@suhailaleryani
Copy link

suhailaleryani commented Dec 6, 2018 •
edited
Loading

Hi, I solved this by wrapping the modal html inside a div.

<div className="some-modal-container">
   <div className="modal ..."> ........ ...... ...... </div>
</div>

Hope this help

@RobertSigma
Copy link

This is definitely still an issue.

Before showing modal:
Before showing modal

After showing modal:
Showing modal

Please re-open.

@kyletsang
Copy link
Member

@RobertSigma can you post a repro on CodeSandbox?

@Ghadahb
Copy link

Ghadahb commented Jan 23, 2022 •
edited
Loading

Had the same issue. I solved it by wrapping the modal in a View at the bottom of my code. (after the last view) Just make sure there isn't another View below it

@pinguluk
Copy link

I had the same or similar issue, where my modal would be rendered twice
mui/material-ui#24641 (comment)

@kalekachali
Copy link

Still facing a similar issue. My modals are being rendered twice in the DOM.
Please help.
Screenshot 2023-11-06 at 07 37 11

@pinguluk
Copy link

pinguluk commented Nov 6, 2023

Still facing a similar issue. My modals are being rendered twice in the DOM. Please help. Screenshot 2023-11-06 at 07 37 11

have you looked into the webpack configuration? mui/material-ui#24641 (comment)

@kalekachali
Copy link

Still facing a similar issue. My modals are being rendered twice in the DOM. Please help. Screenshot 2023-11-06 at 07 37 11

have you looked into the webpack configuration? mui/material-ui#24641 (comment)

Well, I'm using react, not webpack.
The modal mounts once on some occasions but on others it mounts twice as seen above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@jquense @taion @kyletsang @kalekachali @suhailaleryani @flygis @pinguluk @soulclown @RobertSigma @Ghadahb