I am trying to use Bootstrap modal inside React. I have successfully opened a modal. For closing the modal programatically, I am using the below code.

$('#exampleModal').modal('hide')

The code is written inside the onClick event of a button. When I click the button, I am getting the error Unhandled Rejection (TypeError): jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).modal is not a function

I have imported Bootstrap and jQuery as below.

import 'bootstrap';
import $ from 'jquery'; 

How to fix this? How can I use jQuery inside React to close the modal?

CodePudding user response：

Use react-bootstrap and try to avoid JQuery while working with React. Because JQuery is at a bit different level than React internals, if I can put it this way.

In this example you can see how it can be handled within component state to show modal: https://react-bootstrap.github.io/components/modal/#modals-live