'adminlte select 2 is not working in reactjs
I am trying to convert adminlte theme into reactjs
everything is working fine but when I use multi-select (select 2), my script is not loading until i will reload that page
my index.html page from public folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
rel="stylesheet"
href="%PUBLIC_URL%/plugins/select2/css/select2.min.css"
/>
<link
rel="stylesheet"
href="%PUBLIC_URL%/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
/>
<link
rel="stylesheet"
href="%PUBLIC_URL%/plugins/fontawesome-free/css/all.min.css"
/>
<link rel="stylesheet" href="%PUBLIC_URL%/dist/css/adminlte.min.css" />
<!-- for data tables -->
<link
rel="stylesheet"
href="%PUBLIC_URL%/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css"
/>
<link
rel="stylesheet"
href="%PUBLIC_URL%/plugins/datatables-responsive/css/responsive.bootstrap4.min.css"
/>
<link
rel="stylesheet"
href="%PUBLIC_URL%/plugins/datatables-buttons/css/buttons.bootstrap4.min.css"
/>
<title>admin lte</title>
<style type="text/css">
.radio-button {
font-size: 0;
display: inline-block;
position: relative;
border: 4px solid #007bff;
}
.radio-button input[type="radio"] {
margin: auto;
visibility: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.radio-button label {
color: #fff;
background: #fff;
font-size: 16px;
line-height: 16px;
font-weight: 400;
text-align: center;
width: 40px;
padding: 0px;
margin: 0;
cursor: pointer;
position: relative;
z-index: 1;
transition: all 0.3s ease 0s;
}
.radio-button label:before {
content: "";
background: #007bff;
width: 100%;
height: 100%;
opacity: 1;
transform: scaleX(0);
transform-origin: left center;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.radio-button label:nth-child(2):before {
transform-origin: right center;
}
.radio-button input[type="radio"]:checked + label {
color: #fff;
font-weight: normal;
}
.radio-button input[type="radio"]:checked + label:before {
opacity: 1;
transform: scaleX(1);
}
</style>
</head>
<body className="hold-transition sidebar-mini">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="%PUBLIC_URL%/plugins/jquery/jquery.min.js"></script>
<script src="%PUBLIC_URL%/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="%PUBLIC_URL%/dist/js/adminlte.min.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="%PUBLIC_URL%/plugins/jszip/jszip.min.js"></script>
<script src="%PUBLIC_URL%/plugins/pdfmake/pdfmake.min.js"></script>
<script src="%PUBLIC_URL%/plugins/pdfmake/vfs_fonts.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="%PUBLIC_URL%/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script src="%PUBLIC_URL%/plugins/select2/js/select2.full.min.js"></script>
<script>
$(function () {
$(".select2").select2();
});
</script>
</body>
</html>
My Component where I am calling multi-select
import React, { useEffect } from "react";
export default function TeamComponent() {
return (
<div className="content-wrapper">
{/* Main content */}
<section className="content">
{/* Default box */}
<div className="card">
<div className="card-body row">
<div classname="col-4">
<div className="form-group">
<label>User Id</label>
<select
className="select2"
multiple="multiple"
data-placeholder="Select a State"
style={{ width: "100%" }}
>
<option>Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
currently, my output is something like this
when I hard refresh the page
then output is :enter image description here
please help me and let me know how can I fix this problem
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|