Collapsible Sidebar with React and Bootstrap

Question

I want to make a collapsable sidebar using Bootstrap and React and I'm following this tutorial. http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/

I was able to generate a static site, but I can't get the jquery script to work with React. I have a few Jquery files from an old site that I'll be transferring to the new React site. Do I need to take a different approach?

$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
     $("#menu-toggle-2").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled-2");
        $('#menu ul').hide();
    });

     function initMenu() {
      $('#menu ul').hide();
      $('#menu ul').children('.current').parent().show();
      //$('#menu ul:first').show();
      $('#menu li a').click(
        function() {
          var checkElement = $(this).next();
          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
            }
          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
            }
          }
        );
      }
    $(document).ready(function() {initMenu();});

Answer 1

Ideally you shouldn't use jQuery with React unless you have a good reason (see this thread). React works by keeping the real DOM synchronised with its own virtual DOM, so it doesn't like it if jQuery tries to manipulate the DOM while React is trying to do its thing.

In your case, you would probably be better off using a React component such as react-burger-menu, or impromptu-react-sidemenu. Collections of components like Material UI also offer this functionality (material UI's drawer component).

EDIT - Removed React Components link as it is a deadlink & spam filled.