Bootstrap Modal Is Not Working In React JS

I get an error. I have added some code and would like to my code to get to know why its not working. I can't use react-strap. Please suggest if we can use Bootstrap modal in react.

Solution 1:

You can include jquery and bootstrap using CDN in index.html file which is in public folder.

<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>

Also make sure you have added bootstrap.css file,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Demo

Solution 2:

I think you haven't import bootstrap CSS and js in index.js file.

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

it will work fine after import these CSS and js

Solution 3:

install jquery

npm install -S jquery

import jquery and bootstrap

import 'jquery/dist/jquery.min.js';

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";