Why my modal is not showing up after click?

Question

I am trying to add a button that would open a modal where a user could fill their information. But I have a problem. I inserted a modal from bootstrap but it is not working. The button appears but after clicking nothing shows up. I have tried everything I know and also treid googling it but nothing on the internet helped. I am new in react and I don't know what is the problem and what I could do more. Here is a snippet from my code:

 function AddNew(props) { const [show, setShow] = useState(false); return ( <> <Button variant="primary" onClick={() => setShow(true)} id="add-patient"> Pridėti </Button> <Modal show={show} onHide={() => setShow(false)} dialogClassName="modal-90w" aria-labelledby="add-new" > <Modal.Header closeButton> <Modal.Title id="add-new">Custom Modal Styling</Modal.Title> </Modal.Header> <Modal.Body> <p>...</p> </Modal.Body> </Modal> </> ); }

And this is all code: Code

Please help me!

Answer 1

Here is a working example: https://codesandbox.io/s/cranky-yonath-ui7q3

I just add animation={false} as a props to the Modal component to make it works (maybe some css files are missing to get the animation working):

<Modal
        show={show}
        onHide={() => setShow(false)}
        dialogClassName="modal-90w"
        aria-labelledby="add-new"
        animation={false}
      >

Edit: That is actually the reason, add bootstrap as a dependency and import "bootstrap/dist/css/bootstrap.min.css"; in your code ( follow the installation instructions here )

Answer 2

Please read react-bootstrap introduction . You are missing bootstrap css which is required for react-bootstrap to work.

You need to install bootstrap

npm install bootstrap

and then import it in your index.js file

import 'bootstrap/dist/css/bootstrap.min.css';