modal not working on my react project ( working with bootstrap)-CodePudding

i want to use bootstrap modal in my project so i took this code : i have used the samed id on data-bs-target and the id


    {/* modal start */}
    <div
        id="small_modal"
        className="modal fade"
        role="dialog"
        aria-labelledby="mySmallModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-sm">
          <div className="modal-content shadow-max">
            <div className="modal-header">
              <h3 className="modal-title" id="exampleModalLabel1">
                Modal title
              </h3>
              <button
                type="button"
                className="close icon"
                data-dismiss="modal"
                aria-label="Close"
              >
                close
              </button>
            </div>
            <div className="modal-body">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-lg btn-link"
                data-dismiss="modal"
              >
                Cancel
              </button>
              <button
                type="button"
                className="btn btn-lg btn-primary"
                data-dismiss="modal"
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      </div>

{/* modal end */}

and this is the button i have so that the modal appears :

 <button
        type="button"
        className="btn btn-lg btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#small_modal"
        
      >
        Small modal
      </button>

i dont know why it is not working, do i need to write something else ? i added the bs on data-toggle and data-target because i saw online it is needed, but it still didnt work

CodePudding user response：

You can use the below approach to achieve this. Adding custom onClick events on buttons.

 <button
      type="button"
      className="btn btn-lg btn-link"
      data-dismiss="modal"
      onClick={() => {
              document.getElementById('small_modal').style.display = 'none';
              document.getElementById('small_modal').style.opacity = 0;
       }}>
           Cancel
     </button>

Full code :

import "./App.css";

export default function App() {


  return (
    <div className="App">

{/* modal start */}
       <div
        id="small_modal"
        className="modal fade"
        role="dialog"
        aria-labelledby="mySmallModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-sm">
          <div className="modal-content shadow-max">
            <div className="modal-header">
              <h3 className="modal-title" id="exampleModalLabel1">
                Modal title
              </h3>
              <button
                type="button"
                className="close icon"
                data-dismiss="modal"
                aria-label="Close"
                onClick={() => {
                  document.getElementById('small_modal').style.display = 'none';
                  document.getElementById('small_modal').style.opacity = 0;
      
              }}
              >
                close
              </button>
            </div>
            <div className="modal-body">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-lg btn-link"
                data-dismiss="modal"
                onClick={() => {
                  document.getElementById('small_modal').style.display = 'none';
                  document.getElementById('small_modal').style.opacity = 0;
      
              }}
              >
                Cancel
              </button>
              <button
                type="button"
                className="btn btn-lg btn-primary"
                data-dismiss="modal"
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      </div>

{/* modal end */}
     <button
        type="button"
        className="btn btn-lg btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#small_modal"
        onClick={() => {
            document.getElementById('small_modal').style.display = 'block';
            document.getElementById('small_modal').style.opacity = 1;

        }}
          
      >
        Small modal
      </button>
    </div>
  );
}

Although it will fix the issue but I'll recommend to use react-bootstrap library for this. Using React Bootstrap you'll be able to do to the same thing in much easier and simpler way.

Check here for more info and examples - react bootstrap doc link