I get an error when trying to make a jquery function in react

Question

I'm trying to use a jquery function inside of my JSX component.

JSX code:

import React, { Component } from 'react';
import '../css/nav.scss';
import { Link, NavLink } from 'react-router-dom';
import 'react-bootstrap';
import $ from 'jquery';


class Navbar extends Component {
  state = {};

   $(window).scroll(function() {
    var nav = $('#navbar');
    var top = 200;
    if ($(window).scrollTop() >= top) {
      nav.addClass('down');
    } else {
      nav.removeClass('down');
    }
  });


  render() {
    return (
      <nav className="navbar sticky-top navbar-expand-lg ">
        <NavLink
          to="/"
          class="navbar-brand"
          activeClassName="navbar-brand--active"
        >
          Web_Env
        </NavLink>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">
                Create post
              </a>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <NavLink
                to="/login"
                className="nav-link"
                activeClassName="nav-link--active"
              >
                Login
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                to="/register"
                className="nav-link"
                activeClassName="nav-link--active"
              >
                Register
              </NavLink>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

export default Navbar;

I get an error on the period between $(window).scroll which says " '{' or ';' expected.ts(1144) " The next error is on the function() which says " (method) Navbar.function(): void Parameter declaration expected.ts(1138) ". I don't understand what I'm doing wrong or why function doesn't work. I've tried another snippet of jquery code and got another error on function. I definetly hav jquery installed and it is imported.

[how-to-use-jquery-with-reactjs](https://stackoverflow.com/questions/38518278/how-to-use-jquery-with-reactjs) — Mohamed-Yousef, Dec 28 '19 at 17:44
Please don't use jQuery with React. There is absolutely no reason for it. Just learn React. — Matthew Moran, Dec 28 '19 at 17:53

score 0 · Accepted Answer · answered Dec 28 '19 at 17:39

0

This following code has to go in the componentDidMount life-cycle method:

componentDidMount() {
  $(window).scroll(function() {
    var nav = $('#navbar');
    var top = 200;
    if ($(window).scrollTop() >= top) {
      nav.addClass('top');
    } else {
      nav.removeClass('down');
    }
  });
}

By the way, I wouldn't use jQuery with React. That kind of defeats the purpose and will result in some weird and unexpected behavior.

answered Dec 28 '19 at 17:39

Joshua Obritsch

1,253
8
14

Im a begginer with javascript and react so using react to do this stuff is so overwhelming right now I think I'll use a bit of jquery. – patbied Dec 28 '19 at 17:53
Yeah, for learning purposes it's fine. But React isn't really built to use jQuery, so it may cause some problems. Anyway, good luck and have fun. :) – Joshua Obritsch Dec 28 '19 at 17:55

score 0 · Answer 2 · answered Dec 28 '19 at 17:52

You need to move your event handler into componentDidMount lifecycle method.

componentDidMount() {
    $(window).scroll(() => {
        const nav = $('#navbar');
        const top = 200;
        if ($(window).scrollTop() >= top) {
            nav.addClass('top');
        } else {
            nav.removeClass('down');
        }
    });
}

I get an error when trying to make a jquery function in react

2 Answers2