Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to close bootstrap 5 modal with react

I am using bootstrap 5 with react in my project. I did not install it but using cdn links to use bootstrap element in the dom. I am using bootstrap modal to update data. After the update I want to close the modal. I tried to use useRef hook but it does not work and it is giving error. I tried to close it by document by id but still its not wroking. My code is

<div
          className="modal fade"
          id="QuestEditModal"
          tabIndex="-1"
          aria-hidden="true"
        >
          <div className="modal-dialog modal-lg modal-dialog-centered">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Edit Question</h5>
                <button
                  type="button"
                  className="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>

              <div className="modal-body">
                <div className="d-flex flex-row bd-highlight mb-3">
                  <div className="p-2 w-80 bd-highlight">
                    
                    <div className="input-group mb-3">
                    <label htmlFor="Question" className="form-label">Question</label>
                        <textarea className="form-control" 
                        id="Question" rows="3" cols="160" name="question"
                        value={qcont}
                        onChange={(event) => handleQChange(event)}
                        ></textarea>
                    </div>
                    <div className="input-group mb-3">
                    <button
                    type="button"
                    className="btn btn-primary float-start"
                      onClick={(e) => handleSave(e)}>
                          Update
                    </button>
                    </div>
                  </div>
                  
                </div>
              
            </div>
          </div>
        </div>
      </div>

const handleSave = (event) => {
    fetch("http://localhost:57030/api/question", {
         method: "PUT",
         headers: {
           Accept: "application/json",
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
           QuestId:qid,
           ExamUid:exuid,
           QuestUid:quid,
           Content:qcont
         }),
       })
         .then(res => res.json())
         .then(res => {
             console.log(res);
             refreshList();
           },
           (error) => {
             alert("Failed" + error);
           }
         ); 
  }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The close button of modal has these parameters

    <button
                  type="button"
                  className="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>

    My save button was

    <button
                    type="button"
                    className="btn btn-primary float-start" onClick={(e) => handleSave(e)}>
                          Update
                    </button>

    I have added two parameters of modal's close button to my save button and now it is not only saving the data but also closing the modal popup.

    data-bs-dismiss="modal"
                    aria-label="Close"

    like this

    <button
                    type="button"
                    className="btn btn-primary float-start" data-bs-dismiss="modal"
                    aria-label="Close" onClick={(e) => handleSave(e)}>
                          Update
                    </button>

  2. 0

    You have to do something like this.
    Create ref for the model

      const modalRef = useRef(null);

        <div
        className="modal fade"
        id="QuestEditModal"
        ref={modalRef}
        tabIndex="-1"
        aria-hidden="true"
      >....</div>

    Now After the successful API response create a model instance and close it.

    const bootstrapModal = new bootstrap.Modal(modalRef.current);
bootstrapModal.hide();

    Check the we they did in the doc

    As per the doc you can directly use the id without ref

    const model= new bootstrap.Modal(document.getElementById('QuestEditModal'));
model.hide();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search