I have a jQuery function for toggling the class in custom.js.so I integrate all the CSS, and bootstrap custom.js in a public folder in HTML, but all the other files work fine but custom.js is not working so I install the jQuery library & import the jQuery & custom.js in index.js but still the same problem. Is any other way to achieve this because I have more functions in custom.js.
import $ from 'jquery;
$(document).ready(function () {
$(".mobile-filter-btn").click(function () {
$(".plp-filter").addClass("visible");
});
$(".mob-heading-close-btn").click(function () {
$(".plp-filter").removeClass("visible");
});
} <script type="text/jsx" src="%PUBLIC_URL%/assets/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/popper.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/bootstrap.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/custom.js"></script> Actually I assume that it works as expected, but the problem is, you are trying to put click handlers when components with those classes are not rendered yet.
You can put those jquery code into a function, import it to your react component and then use it in "componentDidMount" or useEffect with empty array of dependencies (works like componentDidMount in functional components) depending on which components you are using.
This way you will make sure that everything is rendered and you have where to put you click handlers.
To check this, try to console.log $(".mobile-filter-btn") in your code. I expect it to be undefined.
Also this is not good idea to bring jquery to react. It might work not very good with it and produce a lot of bugs or maintenance problems