I am encountering an issue with the Bootstrap collapse functionality in my React application

My react app is encountering issues with the Bootstrap collapse feature.

I am in need of the collapse functionality for my app, but it seems to not be functioning properly within my react app.

The Bootstrap classes seem to be working fine, but the onclick event associated with Bootstrap is not reacting as expected.

You can explore the code on CodeSandbox via this link: CodeSandbox Link

If you want to reference Bootstrap's documentation on collapse, you can view it here: Bootstrap Link. Any help in resolving this issue would be greatly appreciated.

javascriptcssreactjsbootstrap-4react-bootstrap

Answer №1

It is necessary to install three dependencies in your application

  1. bootstrap
  2. jquery
  3. @popperjs/core

All script tags must be included in the index.html page

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819d819f82cdcadbce9e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
      integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
      integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
      crossorigin="anonymous"
    ></script

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the @change event is triggered, Vue data objects do not exhibit reactivity

Trying to figure out why the msg and show data parameters are not updating when triggered by @change. To ensure that these parameters are only updated upon successful file upload, I placed them inside the lambda function of onload: reader.onload = functio ...

javascriptnode.jsvue.jsquasar

Importing a MATLAB table file into a Node.js environment and converting it into an array

Currently in the process of setting up a test server for a Web-Application, where fake data needs to be transmitted via a Websocket. The fake data is stored in a MATLAB table file (.mat), which essentially consists of a 4000*192 array. My goal is to conver ...

javascriptnode.jsmatlab

Utilizing HTML and JavaScript to dynamically switch stylesheets based on the width of

When it comes to using stylesheets for mobile and non-mobile devices, there is a need for different approaches. The idea of comparing browser height and width in JavaScript seems like a good one, but the implementation may not always work as expected. ...

javascripthtmlcssstylesheet

Be patient for the complete loading of the image during an AJAX operation

My webpage includes an ajax action that loads a div containing an image on the left and text on the right. The issue I am facing is that the text loads first, aligned to the left, and then the image loads, causing the text to shift to the right, resulting ...

javascriptjqueryhtmlajax

Displaying file when JQuery dialog is opened

I am utilizing a JQuery dialog to load a partial view within it. $("#WOdialog").dialog({ width: 765, resizable: false, closeOnEscape: true, modal: true, clos ...

javascriptasp.netajaxjquery-ui-dialogjqxhr

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

javascripthtml

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

javascriptjqueryhtml

Lost, a lone figure... beyond salvation

Help! I am encountering these errors while validating my code with W3C Line 41, Column 143: Oops! Stray end tag body. …t1_02.gif','images/Part1_03.gif','images/Part1_04.gif','images/Part1_05.png')"> ✉ Line 41, C ...

javascripthtmlw3crecover

Creating a variable amount of datasets depending on database values in an easy way

I am striving to create a dynamic graph in PHP using CanvasJS with multiple datasets generated based on values from a database. Generating the graph with only one dataset was successful, but making it "dynamic" has proven to be a challenge. For a single d ...

javascriptphpcanvasjs

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Building a program that involves working with an AngularJS array. I need to showcase the elements of the AngularJS array, returned by a function, in an organized manner. Each element should be displayed correspondingly - for example, 'first' cont ...

javascripthtmlcssangularjs

Issues with aligning text in TextBoxes

I'm struggling to center align my text boxes and write labels on either side. I want it to look like this: https://i.stack.imgur.com/6QsNv.png Despite trying different solutions, I can't seem to get the boxes to align in the center. Is there a ...

csshtmltextboxalignment

Unexpected behavior encountered with the 'touchmove' event in React

Currently, I am developing an application using NextJS that involves creating a window manager where users can drag and resize panels. While everything functions correctly on desktop devices, the event listeners are not behaving as expected on mobile devic ...

htmlreactjsnext.jsjsxaddeventlistener

Fetching data from API in React Native based on a dynamic ID

As a newcomer to react native, I have successfully fetched data from an API on my home screen using redux and axios. Now, I am looking to implement a functionality where clicking on an image will take me to the EventInfo screen and display information base ...

reactjsreact-nativereact-reduxaxios

Sending files to different URLs based on their type for upload

I've been working with Jquery File Upload and I've implemented some coffeescript that appears like this: $('.fileupload').fileupload dataType: "json" add: (e, data) -> file = data.files[0] types = /(\.|\/)(gif|jpe? ...

javascriptfilecoffeescriptjquery-file-upload

reCAPTCHA v3 - Alert: There are no existing reCAPTCHA clients available

After coming across a similar issue on Stack Overflow (link to the question here), I attempted to implement reCAPTCHA on my website to combat spam emails received through the form. Despite following Google's instructions, I encountered an error that p ...

javascriptphpajaxrecaptchacaptcha

Searching for city and postal code through the Google Maps API is a straightforward process

Is there a way to extract the city and postal code from the Google Maps API? Here is my current code: if (place.address_components) { code = [place.address_components[0].types[0].postal_code]; alert(code); document.getEleme ...

c#javascriptasp.net

Create a JavaScript function that performs multiplication and returns two distinct calculations

Upon examination of the embedded script below, I noticed that it is only providing a single result (500). How can I modify my code to generate both results? Your advice on this matter is greatly appreciated. function multiplier() { var number = 2 ...

javascriptarraysfunctionmultiplication

AngularJS text area not displaying HTML content

In my Ionic's App, I have a textarea that is used for creating or editing messages. However, I am encountering an issue where the textarea does not render HTML tags when trying to edit a message. I attempted solutions such as setting ng-bind-html and ...

javascriptangularjsionic-framework

Is $timeout considered a questionable hack in Angular.js development practices?

Here's a question for you: I recently encountered a situation where I needed to edit the DOM on a Leaflet Map in order to manipulate the appearance of the legend. To workaround an issue where the map wasn't generating fast enough to access the n ...

javascripthtmlangularjstimeout

Generate a fresh array using a current array comprising of objects

Greetings! I am facing a challenge with an array of objects like the one shown below: const data = [ {day: "Monday", to: "12.00", from: "15.00"}, {day: "Monday", to: "18.00", from: "22.00"}, {day: ...

javascriptarraysreactjs