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 thisand thisand 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">×</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
