componentDidMount() issue with starting jquery function - React

Question

I'm working on ReactJS application. My $(document).ready(function(){}); stop working after I switch path with React Router Dom. I searched google to find solution for this issue. I find this article:

React-router : How to trigger $(document).ready()?

I used code from the answer of this question. You can see my code here:

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
import $ from 'jquery';

import MainRouter from './MainRouter';

class App extends Component {
    componentDidMount() {
        let bootstrapMaterialDesign = $.fn.bootstrapMaterialDesign;
        $('body').bootstrapMaterialDesign({});
    };

    render() {
        return (
            <BrowserRouter>
                <MainRouter />
            </BrowserRouter>
        )
    }
};

export default App;

This code didn't work. I don't know why. Here you can see React error:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).bootstrapMaterialDesign is not a function

Script for raw javascript is: <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script> Thank you ☺

Answer 1

I would not recommend jquery in react. For any reason if you want to use it. You need to import all these file in your index.html place under public folder:

<link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
      integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX"
      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://unpkg.com/popper.js@1.12.6/dist/umd/popper.js"
      integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js"
      integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9"
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $("body").bootstrapMaterialDesign();
      });
    </script>

Here is demo in React: https://codesandbox.io/s/staging-frost-6r6vj?file=/public/index.html:571-1620

Answer 2

Here's a short walkthrough for how to install and use bootstrap or material-design with React, without needing jQuery.

Bootstrap is planning to move away from jQuery in version 5 so it is important to choose libraries that will not depend on jQuery, unless you are certain that this your want to maintain that leg of your code base (but as other commenters have noted, including jQuery within React is not necessary and in fact, vanilla Javascript can be just as functional ).

---

First, you will need to decide whether you need bootstrap or material design, or both. I will proceed assuming that you just want bootstrap components, in which case all code below applies nicely (for an introduction,see here ). Otherwise, you'll need to follow the material design instructions, see here .

Onward with installation:

cd path/to/root/react/folder
npm install bootstrap react-bootstrap

From that same folder, run npm start and let's start editing your files.

---

In your app.js file, change as follows:

import React from 'react';
import { Router, Switch, Route } from 'react-router-dom';

import Main from './Main.js';

const App () => {

    // Any hooks or other functions needed for rendering router stuff, put it here

    render {
        return (
            <Router>
                <Switch>
                    <Route path="/" component={Main.js} />
                </Switch>
            </Router>
        )
    }

};

export default App;

Note that this uses functional programming, not classes. So no need for 'didComponentMount'. And I've adjusted your router configurations for a basic, new-to-react setup.

---

Now assuming that your Main.js file has a basic router setup, set it up as follows:

import React from "react";
import { Button } from "react-bootstrap";

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

export default function Main() {
  return (
    <div>
      <h1>Hello StackOverflow!</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button className="btn btn-primary">Here's a button!</Button>
    </div>
  );
}

CodeSandbox example here: https://codesandbox.io/s/react-simple-bootstrap-example-xydjx?file=/src/App.js