Hide Bootstrap Modal in React

Question

I'm using Bootstrap for my React project, I'm not using react-strap or react-bootstrap only pure Bootstrap. I have a modal for entry form data, to handle show or hide the modal I following from bootstrap documentation. Below how I show the modal and its work:

import { Modal } from "bootstrap/dist/js/bootstrap.bundle";

const showModal = () => {
    const modal = new Modal(document.querySelector("#exampleModal"));
    modal.show();
}

And now I want to hide the modal after submitted form data, so this is how I hide the modal:

const hideModal = () => {
    const modal = new Modal(document.querySelector("#exampleModal"));
    modal.hide();
}


const submitNewNote = (e) => {
    e.preventDefault();

    const notes = {
        titleNote: titleNote,
        tasks: [...temporaryNote]
    }
    
    fetch("http://localhost:8000/notes", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(notes)
    })
        .then(response => response.json())
        .then(data => {
            console.log("New data added", data);
            hideModal();
        })
        .catch(err => console.log(err))
}

But it's not working like how I show the modal. Do you know what is wrong or you have another solution to show/hide the modal? Thanks!

Hey! well first I think using `document.querySelector` is not the best approach using React.. Anyway, after you call `hide` you are instantiating a new Modal again, so probably you have overlapped modals, did you check with the console? — AdriSolid, Feb 20 '21 at 08:15
You can inspect your `#exampleModal` container (it is a div right?), checking if there is more than one modal. — AdriSolid, Feb 20 '21 at 08:36

Nicholas Mberev · Answer 1 · 2022-11-29T02:09:37.817

First of all, if your Modal Html code has the class fade, remove it, and then use the same instance of the Modal to hide it instead of creating a new one each time.

Define your Modal instance somewhere, like so;

const MyModal = new Modal(document.querySelector("#exampleModal"));

Then in your show method:

const showModal = () => {
    MyModal.show();
}

Likewise in the Hide method:

const hideModal = () => {
    MyModal.hide();
}

Hide Bootstrap Modal in React

1 Answers1