Incorporating Bootstrap 5.2 modals into my Next.js application has been smooth sailing so far. However, I've encountered an issue with closing the modal window after a successful backend request. To trigger the modal, I use the data-bs-toggle="modal" attribute. Following the documentation and some research, I crafted a function within my component:
export function LoginModal() {
const loginModalRef = useRef();
const hideModal = () => {
const { Modal } = require("bootstrap");
const myModal = new Modal(loginModalRef.current);
console.log(1,myModal,Modal)
myModal.hide();
};
function sendRequest() {
// if response success
hideModal();
}
return (
<>
<div ref={loginModalRef} id="login-modal" className="modal fade">
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<svg className="close-icon position-absolute pointer" data-bs-dismiss="modal">
<use xlinkHref="/images/sprite.svg#close-icon"></use>
</svg>
<div className="modal-body">
MyModalContetn
<div onClick={sendRequest}>Send</div>
</div>
</div>
</div>
</div>
</>
);
}
Despite implementing the hide() method, the modal persists without closing, and no errors are reported.
Bootstrap has been included in _app.js as follows:
const App = ({ Component, pageProps }) => {
// including bootstrap js
useEffect(() => {
require("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);
/////
I'm seeking guidance on what might be causing this issue and how it should ideally function in my scenario. Thank you sincerely for any help provided in advance.