Integrate jquery and javascript from <script> tag into react

Question

I have the following code in HTML that I would like to integrate into react but not sure really how to do it.

I think it is a basic error. I may be even going about it all wrong

I want the functionality from the following HTML in my react APP. Its a nice responsive menu with a burger bar that expands to a mobile menu

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!--Import Google Icon Font-->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <!-- Compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />

    <title>GRID</title>
  </head>
  <body>

<nav class="nav-wrapper indigo">
  <div class="container">
    <a href="#" class="brand-logo">Site Title</a>
    <a href="#" class="sidenav-trigger" data-target="mobile-links">
      <i class="material-icons" onClick="displayMobileMenu">menu</i>
    </a>

    <ul class="right hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Login</a></li>
    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
</ul>


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script
    $(document).ready(function(){
      $('.sidenav').sidenav();
    });></script>

  </body>
  </html>

BELOW IS WHAT I HAVE TRIED I have installed the dependencies

jquery {npm i jquery}(I think this works but not using it for anything else so not sure)
Materialize {npm i materialize} (this works on the rest of the site)

My issue is I am not really sure if I should use the jquery or write something new maybe with componentDidMount()

below is the react code codesanbox.io is here https://codesandbox.io/embed/wiki-mogpb?fontsize=14

import React from "react";
import { Link } from "react-router-dom";
import $ from "jquery";



const displayMobileMenu = () => {
  return (
      $('.sidenav').sidenav()
  )
};

const Navbar = ({ title }) => {
  return (
    <div>
      <nav className="nav-wrapper indigo">
        <div className="container">
          <a href="#" className="brand-logo">
            React Wiki
          </a>
          <a href="#" className="sidenav-trigger" data-target="mobile-links">
            <i
              className="material-icons"
              onClick={displayMobileMenu()}
            >
              menu
            </i>
          </a>

          <ul className="right hide-on-med-and-down">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/files">React Files</Link>
            </li>
            <li>
              <Link to="/context">Contexts</Link>
            </li>
            <li>
              <Link to="/questions">Questions</Link>
            </li>
          </ul>
        </div>
      </nav>

      <ul className="sidenav" id="mobile-links">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
        <li>
          <a href="#">Login</a>
        </li>
      </ul>
    </div>
  );
};
Navbar.defaultProps = {
  title: " React Wiki"
};

export default Navbar;

It's generally counter-indicated to mix React with jQuery. You should really find a React compatible way to achieve what you need — apokryfos
– apokryfos, Commented Nov 5, 2019 at 9:05

Prakash Karena · Accepted Answer · 2020-01-15 13:57:59Z

Here is a simple example project of the navbar in react.js

Navbar.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { FaAlignRight } from "react-icons/fa";
/*--------------- css ----------------*/
import './Navbar.css';

export default class Navbar extends Component {
  state = {
    isOpen: false
  };
  handleToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };
  render() {
    return (
      <nav className="navbar">
        <div className="nav-center">
          <div className="nav-header">
            <Link to="/" className='logo'>
                rao
            </Link>
            <button
              type="button"
              className="nav-btn"
              onClick={this.handleToggle}
            >
              <FaAlignRight className="nav-icon" />
            </button>
          </div>
          <ul
            className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}
            onClick={this.handleToggle}
          >
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/services">Services</Link>
            </li>
            <li>
              <Link to="/aboutus">About Us</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
            <li>
              <Link to="/portfolio">Portfolio</Link>
            </li>
            <li>
              <Link to="/clientele">Clientele</Link>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

/* Navbar.css */
.navbar {
  top: 0;
  left: 0;
  width: 100%;
  background: var(--offWhite);
  z-index: 1;
}

.nav-header {
  display: flex;
  justify-content: space-between;
}

.nav-header .logo{
  color: darkblue;  
  text-decoration: none;
  font-size: 50px;
  font-family: 'Courier New', Courier, monospace;
}

.nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding-right: 20px;
}
.nav-icon {
  font-size: 1.5rem;
  color: var(--primaryColor);
}
.nav-links {
  height: 0;
  overflow: hidden;
  transition: var(--mainTransition);
  list-style-type: none;
  padding: 0px;
  right: 0px;
  transition: height 1s;
}
.nav-links a {
  display: block;
  text-decoration: none;
  padding: 1rem 0;
  color: var(--mainBlack);
  transition: var(--mainTransition);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--mainSpacing);
}
.nav-links a:hover {
  color: var(--primaryColor);
}

.show-nav {
  height: 300px;
  transition: height 1s;
}

@media screen and (min-width: 768px) {
  .nav-btn {
    display: none;
  } 
  .nav-center {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
  }
  .nav-links {
    height: auto;
    display: flex;
    margin-right: 8rem;
    position: absolute;
    right: 0px;

  }
  .nav-links a {
    margin: 0 1rem;
    padding: 0.5rem 0;
  }
}
/* end of navbar */

routes.js

/**
 * Routes : returns routes of our application for router
 */
import React from 'react';
import { Route , Switch } from 'react-router-dom';
/****************** Components ******************/

import AboutUs from './Components/AboutUs/aboutus';
import Careers from './Components/Careers/careers';
import ContactUs from './Components/ContactUs/contactus';
import Services from './Components/Services/services';
import Products from './Components/Products/products';
import Portfolio from './Components/Portfolio/Portfolio';
import Clientele from './Components/Clientele/Clientele';
import Home from './Components/Home/home';
import FourOFour from './Components/FourOFour/fourofour';

const Routes = () => {
   return (
       <Switch>
           <Route path="/aboutus" exact component={AboutUs}/>
           <Route path="/careers" exact component={Careers}/>
           <Route path="/contactus" exact component={ContactUs}/>
           <Route path="/services" exact component={Services}/>
           <Route path="/products" exact component={Products}/>
           <Route path="/portfolio" exact component={Portfolio}/>
           <Route path="/clientele" exact component={Clientele}/>
           <Route path="/" exact component={Home}/>
           <Route component={FourOFour}/>        
       </Switch>
   )
}

export default Routes;

Collectives™ on Stack Overflow

Integrate jquery and javascript from <script> tag into react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related