how to define this $ react JS

Question

I have created app using create-react-app. I import owl.carousel but why it is showing this error.

how to define this $

  Line 12:15:  '$' is not defined  no-undef
  Line 21:5:   '$' is not defined  no-undef
  Line 24:5:   '$' is not defined  no-undef

Here is the Component Code


    var owl = $(".owl-carousel");
    owl.owlCarousel({
      items: 4,
      loop: true,
      margin: 10,
      autoplay: true,
      autoplayTimeout: 1000,
      autoplayHoverPause: true,
    });
    $(".play").on("click", function () {
      owl.trigger("play.owl.autoplay", [1000]);
    });
    $(".stop").on("click", function () {
      owl.trigger("stop.owl.autoplay");
    });

Cannot read property of undefined. this picture of error that I got

Not answering the question, but it cannot be a good idea to combine jquery with react. It is better to use react refs => reactjs.org/docs/refs-and-the-dom.html — lanxion
– lanxion, Commented Sep 12, 2020 at 3:20
@lanxion OP isn't the one combining it, but rather the owl module they're using is, and jquery appears to be a peer dependency. — Drew Reese
– Drew Reese, Commented Sep 12, 2020 at 3:21

HoldOffHunger · Accepted Answer · 2020-09-12 03:16:33Z

1

Import jQuery to your project with ReactJS like so...

import $ from 'jquery';

Before you can do that, you must install it to your project. See the NPM documentation for more info: npm->jQuery. You can install it with npm by means of...

npm install --save jquery

And you can know the installation worked by checking your package.json file and seeing...

"dependencies": {
  "jquery": "^3.3.1",
  ....

edited Sep 12, 2020 at 3:16

answered Sep 12, 2020 at 3:10

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lanxion Over a year ago

Also, according to npmjs.com/package/react-owl-carousel, you are required to do some webpack config to inject a global window.jquery

Collectives™ on Stack Overflow

how to define this $ react JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related