React Bootstrap Modal has no content --> not show

Asked Oct 11 '21 at 07:44

Active Oct 11 '21 at 08:12

Viewed 102 times

my react bootstrap modal is not filled with content. As you can see in the dom, there is no content inside:

But in my Code it is like:

import { Modal, Button } from "react-bootstrap";
import "./CustomModal.css";

const CustomModal = ({show, onHide}) => {
  return (
    <Modal show={show} animation={false} style={{ opacity: 1 }} centered>
      <Modal.Header closeButton>
        <Modal.Title>Modal heading</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
};

I'm using the newest React Bootstrap Version:

"react-bootstrap": "^2.0.0-rc.0",
"bootstrap": "^5.1.1",

What`s the problem with my code? Why do I can't see the content in the dom?

And here you can see it in the view. Modal is there, but no height becuase of no content:

edited Oct 11 '21 at 08:12

asked Oct 11 '21 at 07:44

btrautmann

Can you try adding `show={true}` as a prop to ` – Sinan Yaman Oct 11 '21 at 07:51
Tried, but doesn't make any difference to the point that there is no content in the dom. The modal is shown in the frontend but with a height of nothing because there is no content inside :( – btrautmann Oct 11 '21 at 07:54
Tried it in [codesandbox](https://codesandbox.io/s/cranky-chatelet-wos50?file=/src/App.js) it is working. Maybe change `(show, onHide)` to `({ show, onHide })` ? – Sinan Yaman Oct 11 '21 at 08:01
It has curly braces in the code. It was just an copy paste error here. – btrautmann Oct 11 '21 at 08:11
Well this code is not reproducible, where do you render ` – Sinan Yaman Oct 11 '21 at 08:22
It's in a component in a dashboard. In a bootstrap grid. – btrautmann Oct 11 '21 at 08:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238018/discussion-between-btrautmann-and-sinan-yaman). – btrautmann Oct 11 '21 at 08:58

React Bootstrap Modal has no content --> not show

0 Answers0