Bootstrap based Modal is not appearing in React / Next JS application

Question

I have been trying to add a modal to my site for a while now but no matter how much I tried, examples I followed, it just doesn't show up. I am using React with Next JS

I tried this and this and this but for some reason I am unable to make modal appear on the screen. Additionally, I deleted and reinstalled my node_modules folder and yarn.lock but that didn't make a difference either. Here are my steps:

Grabbed a sample modal code from bootstrap components from https://getbootstrap.com/docs/4.4/components/modal/
Created a Modal.js file in src/components
Referenced that in index.js.

Result: I see the "launch demo modal" button but when I click, nothing happens. No error, nothing. I tried in both google chrome and safari and the outcome are the same.

Here is my Modal.js component:

import React from "react";

const Modal = () => {
  console.log("is this being called?");
  return (
    <div>
      <button
        type="button"
        className="btn btn-primary"
        data-toggle="modal"
        data-target="#exampleModal"
      >
        Launch demo modal
      </button>

      <div
        className="modal fade"
        id="exampleModal"
        tabIndex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">
                Modal title
              </h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">...</div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-secondary"
                data-dismiss="modal"
              >
                Close
              </button>
              <button type="button" className="btn btn-primary">
                Save changes
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Modal;

How I call it in index.js

import Modal from "../src/components/Modal";

const Index = ({ posts }) => {

 return (
    <Layout>
      <Navigation />
      <head>
      ....
      <Modal />
.....
)

Scripts referenced in index.html

   <script src="js/jquery/jquery.min.js"></script>
    <script src="js/popper/popper.min.js"></script>
    <!-- <script src="js/bootstrap/bootstrap.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />

and Package.json

{
  "name": "testapp",
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": "12.2.0",
    "npm": "6.4.1",
    "yarn": "1.13.0"
  },
  "dependencies": {
    "@sendgrid/contact-importer": "^6.5.1",
    "@sendgrid/mail": "^6.5.1",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.1",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.1.4",
    "next-images": "^1.2.0",
    "node-sass": "^4.13.1",
    "raw-loader": "^4.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-ga": "^2.7.0",
    "react-markdown": "^4.2.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "dev": "node server/index",
    "build": "next build",
    "start": "next start -p $PORT"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

Thanks for the help.

PS. Bootstrap styling does work only modal doesn't work. For example: <div className="col-md-6 my-auto"> works just fine. fors just fine.

Edit 1: I included to index.html

        <script src="js/jquery/jquery.min.js"></script>
        <script src="js/popper/popper.min.js"></script>
        <script src="js/bootstrap/bootstrap.min.js"></script>

and in the index.js

import $ from 'jquery'; 
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => $("#exampleModal").modal("show")}
                >
                  <Modal />
                </button>

Then I get the following error:

Edit 2:

Deleted jquery import from index.js and ran $("#exampleModal").modal("show") in the developer console I get modal is not a function error now

Edit 3: So I added "reactstrap" and used one of the modals that mentioned here: https://reactstrap.github.io/components/modals/ Then in my index file I added this as part of a button just like in below:

   <button
    className="btn btn-primary"
    onClick={showConfirmationResult}
    >
    Submit
    <ModalExample isOpen={false} toggle={true} />
    </button>

and only then it worked but this is not ideal. I would like to trigger the modal based on a button click so I tried this:

 const showConfirmationResult = () => {
    return <ModalExample isOpen={false} toggle={true} />;
  };

But this doesn't work and I am not sure why.

Thanks for the help.

You can find your answer here. stackoverflow.com/questions/52248179/… — Shubham Nagota
– Shubham Nagota, Commented Feb 24, 2020 at 8:08
This won't work because you are using bootstrap directly which requires jQuery to perform the actions, So I would suggest you to implement the reactstrap library which is bootstrap at the end and you can implement the modal from it. Link: reactstrap.github.io/components/modals — Maniraj Murugan
– Maniraj Murugan, Commented Feb 24, 2020 at 8:09

Subin Sebastian · Accepted Answer · 2020-02-24 08:19:29Z

3

data-target and data-toggle based approach for firing modal won't work because your dom is dynamically created by react. This means your bootstrap javascript has finished running even before that button is rendered by react. So instead you should trigger it using the javascript approach https://getbootstrap.com/docs/4.4/components/modal/#via-javascript

Change your button to something like this.

  <button
    type="button"
    className="btn btn-primary"
    onClick={()=> $('#exampleModal').modal('show')}
  >
    Launch demo modal
  </button>

answered Feb 24, 2020 at 8:19

Subin Sebastian

11k3 gold badges39 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Over a year ago

Hi @ssk, I tried to what you suggested but it seems like I am missing something. I initially got the static compiler error for the "$ is undefined" then I added jquery to the codebase. As a second error I got this error:"TypeError: jquery__WEBPACK_IMPORTED_MODULE_9___default(...)(...).modal is not a function onClick" any ideas on why this occurs?

Subin Sebastian Over a year ago

I saw that you are already including jquery and bootstrap in index.html. Are you sure you have included jquery bootstrap and popper as required by bootstrap framework.

Subin Sebastian Over a year ago

You dont have to import $ from 'jquery'; if you have already included jquery in script tag. avoid that and try $("#exampleModal").modal("show") in developer tools console.

Matt Over a year ago

@Maniraj Murugan I tried reactstrap and got a semi success on it but still not working

Collectives™ on Stack Overflow

Bootstrap based Modal is not appearing in React / Next JS application

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related