animating multiple text using react

Question

I'm trying to fade in and fade out multiple texts using jquery in react but I'm getting the error that Line 46:6: 'jquery' is not defined no-undef even though I did npm i jquery --save. How do I run this small piece of jquery code with react or is there any library through which I can achieve a similar effect?

this is the effect that I was trying to add into the react project -> codepen

import React, { useEffect } from "react";
import $ from "jquery";
import "./App.css";
export const App = () => {
  (function ($) {
    $.fn.extend({
      rotaterator: function (options) {
        var defaults = {
          fadeSpeed: 900,
          pauseSpeed: 900,
          child: null,
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
          var o = options;
          var obj = $(this);
          var items = $(obj.children(), obj);
          items.each(function () {
            $(this).hide();
          });
          if (!o.child) {
            var next = $(obj).children(":first");
          } else {
            var next = o.child;
          }
          $(next).fadeIn(o.fadeSpeed, function () {
            $(next)
              .delay(o.pauseSpeed)
              .fadeOut(o.fadeSpeed, function () {
                var next = $(this).next();
                if (next.length == 0) {
                  next = $(obj).children(":first");
                }
                $(obj).rotaterator({
                  child: next,
                  fadeSpeed: o.fadeSpeed,
                  pauseSpeed: o.pauseSpeed,
                });
              });
          });
        });
      },
    });
  })(jquery);

  $(document).ready(function () {
    $("#rotate").rotaterator({ fadeSpeed: 900, pauseSpeed: 200 });
  });
  return (
 <div className="awards">
        <div className="awardHead">Awards</div>
        <img
          src="./images/trophy.jpg"
          width="300px"
          alt=""
          className="awardPhoto"
        />
        <div id="rotate">
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
           <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>

          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
        </div>
      </div>
);
};

Alexander Nied · Accepted Answer · 2020-05-29 14:53:42Z

1

You import jQuery as $ but then reference it as jquery at line 46 of your code, despite the fact that you've neither declared nor defined a variable named jquery Just pass the $ instead:

import React, { useEffect } from "react";
import $ from "jquery";
import "./App.css";
export const App = () => {
  (function ($) {
    $.fn.extend({
      rotaterator: function (options) {
        var defaults = {
          fadeSpeed: 900,
          pauseSpeed: 900,
          child: null,
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
          var o = options;
          var obj = $(this);
          var items = $(obj.children(), obj);
          items.each(function () {
            $(this).hide();
          });
          if (!o.child) {
            var next = $(obj).children(":first");
          } else {
            var next = o.child;
          }
          $(next).fadeIn(o.fadeSpeed, function () {
            $(next)
              .delay(o.pauseSpeed)
              .fadeOut(o.fadeSpeed, function () {
                var next = $(this).next();
                if (next.length == 0) {
                  next = $(obj).children(":first");
                }
                $(obj).rotaterator({
                  child: next,
                  fadeSpeed: o.fadeSpeed,
                  pauseSpeed: o.pauseSpeed,
                });
              });
          });
        });
      },
    });
  })($); // <== this here was previously an undeclared var of `jquery`

  $(document).ready(function () {
    $("#rotate").rotaterator({ fadeSpeed: 900, pauseSpeed: 200 });
  });
  return (
 <div className="awards">
        <div className="awardHead">Awards</div>
        <img
          src="./images/trophy.jpg"
          width="300px"
          alt=""
          className="awardPhoto"
        />
        <div id="rotate">
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
           <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>

          <div>
            <h2 className="smallAwardHead">BEST Company</h2>
            <p>hello</p>
          </div>
        </div>
      </div>
);
};

answered May 29, 2020 at 14:53

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

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

2 Comments

reduxHelpPlz Over a year ago

thanks. it got solved. also I'm kinda new to react, so I was having doubts as to why I can't see any image even though I declared it as <img src="./images/eclipse.png" id="header-img" alt=""/>

Alexander Nied Over a year ago

@reduxHelpPlz - no problem. Just a word of warning-- generally speaking, usage of jQuery (and really any direct, imperative DOM manipulation) is considered an antipattern in the React and wider MV* web framework world. Ideally you instead use components and interact with their lifecycle to achieve your desired affects. If you find yourself leaning heavily on jQuery, you're likely going to find yourself having a really unpleasant time with maintenance and/or debugging at some point. Good luck!

Collectives™ on Stack Overflow

animating multiple text using react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related