Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react bootstrap modal not showing

i want to show react-bootstrap-modal but only the overlay appear and modal not showing

import Modal from 'react-bootstrap-modal';
......
 <Modal
                    show={this.state.open}
                    onHide={this.closeModal}
                    aria-labelledby="ModalHeader"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>Some Content here</p>
                    </Modal.Body>
                    <Modal.Footer>
                        // If you don't have anything fancy to do you can use
                        // the convenient `Dismiss` component, it will
                        // trigger `onHide` when clicked
                        <Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>

                        // Or you can create your own dismiss buttons
                        <button className='btn btn-primary'>
                            Save
                        </button>
                    </Modal.Footer>
                </Modal>
.....

screenshot:

image from browser

like image 224
Hisham Avatar asked Jan 22 '17 20:01

Hisham


People also ask

How do I show a modal in bootstrap react?

To get started with using Bootstrap in your React application, you need to install the react-bootstrap package from npm along with the bootstrap v4 package. You will need to install regular Bootstrap for the CSS. After the installation is complete, you can import the modal component and the styling into your module.

How do you show modal in react?

Set up the Modal ComponentIn the handleShow() function, set a Boolean state value to true and use it to display or trigger the modal. Now, add the Modal component after the button. Pass the show state variable to the show prop of the Modal component to control the modal behavior.

How show modal on button click react?

Add The State and Methods Add a button inside the render block to trigger the modal. When the button is clicked, the isOpen state will be set to true. Now, to display the modal, all you need to do is pass the isOpen state value to the show prop of the <Modal /> component.


1 Answers

For me it worked with

<Modal show={true}> .... </Modal>

like image 197
NITESH HEBBARE Avatar answered Oct 30 '22 17:10

NITESH HEBBARE