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:
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.
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.
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.
For me it worked with
<Modal show={true}> .... </Modal>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With