Error: $ not defined - Javascript / React

Question

I am in the process of converting a html/css gsap navbar to React. This is returning the following error:

error '$' is not defined no-undef

I cannot seem to find any other guides on the matter that seem to relate to my issue.

import React from "react";
import "../components/Navbar.css";
import { gsap } from "gsap";
import { ExpoScaleEase, RoughEase, SlowMo } from "gsap/EasePack";

gsap.registerPlugin(ExpoScaleEase, RoughEase, SlowMo);

var t1 = gsap.timeline({ paused: true });

t1.to(".one", 0.8, {
    y: 6,
    rotation: 45,
    ease: "power3.inout"
});
t1.to(".two", 0.8, {
    y: -6,
    rotation: -45,
    ease: "power3.inout",
    delay: -0.8
});
t1.to(".menu", 2, {
    top: "0%",
    ease: "power3.inout",
    delay: -2
});
t1.staggerFrom(".menu ul li", 2, { x: -200, opacity: 0, ease: "power3.inout" }, 0.3);

t1.reverse();
$(document).on("click", ".toggle-btn", function () {
    t1.reversed(!t1.reversed());
});
$(document).on("click", "a", function () {
    t1.reversed(!t1.reversed());
});

export const Navbar = () => {
    <div>
        <div className="toggle-btn">
            <span className="one"></span>
            <span className="two"></span>
        </div>

        <div className="menu">
            <div className="data">
                <ul>
                    <li><a href="/">Return Home ➔</a></li>
                    <li><a href="/">Companies</a></li>
                    <li><a href="/">About</a></li>
                    <li><a href="/">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
}

export default Navbar;

Welcome to Stack Overflow. I do not see where you import the jQuery library. Should i be imported with one of the others? — Twisty, Sep 17 '21 at 18:51
@Twisty do you know how/where to import jquery? I have tried to import it via a — louisdev, Sep 17 '21 at 18:53
Please see: https://stackoverflow.com/questions/33351288/jquery-in-react-is-not-defined — Twisty, Sep 17 '21 at 19:07
Does this answer your question? [Jquery in React is not defined](https://stackoverflow.com/questions/33351288/jquery-in-react-is-not-defined) — Arnaud Valmary, Sep 19 '21 at 09:42

score 0 · Accepted Answer · answered Sep 17 '21 at 18:52

There are two places where you reference $:

$(document).on("click", ".toggle-btn", function () {
    t1.reversed(!t1.reversed());
});
$(document).on("click", "a", function () {
    t1.reversed(!t1.reversed());
});

This looks like jQuery, so you need to add the jQuery library or convert this to vanilla js.

score 0 · Answer 2 · answered Sep 17 '21 at 18:52

You can't use $(document).on without importing JQuery.

You either need to import JQuery, or find another solution without using $(document).on

Solution using Javascript only

Replace this:

$(document).on("click", ".toggle-btn", function () {
    t1.reversed(!t1.reversed());
});

with this:

document.addEventListener('click', function(event) {
    if (event.target.classList.contains("toggle-btn")) {
      t1.reversed(!t1.reversed());
    }
});

Error: $ not defined - Javascript / React

2 Answers2

Solution using Javascript only