Jquery code is not working in next js . Showing unexpected results but working on react

Question

i am trying to implement an ui requirement. I want to add a active class name to the children div one at a time. 1st it will add the class in first child, and then the class will be removed and to be added in the 2nd child div. And it will infinitly itereate.

Here is my code in next js


        $(".softwares_container").each(function () {
            (function ($set) {
                setInterval(function () {
                    var $cur = $set
                        .find(`.${st.active}`)
                        .removeClass(`${st.active}`);
                        //store inner html of current item
                     
                    
                    var $next = $cur.next().length
                        ? $cur.next()
                        : $set.children().eq(0);
                    $next.addClass(`${st.active}`);
                    //store inner element of next item
                    //set inner html of current item to inner html of next item
                    var $next_inner = $next.children().eq(0);
                    setValue({
                        name: $next_inner.attr('alt'),
                        description: $next_inner.attr('data-info')
                    })
                    // setImage($next_inner.attr('src'))
                }, 1000);
            })($(this));
        });

    <div className={`softwares_container ${st.left_container}`}>
                        <div className={` ${st.img}`}  alt="1">
                            <img src={ae.src} data-info="this is aftereffects" alt="After effects" />
                        </div>
                        <div className={st.img} alt="2">
                            <img src={pr.src} alt="Adobe Premiere pro" />
                        </div>
                        <div className={st.img}>
                            <img src={ps.src} alt="Adobe Photoshop" />
                        </div>
                        <div className={st.img}>
                            <img src={xd.src} alt="Adobe Xd" />
                        </div>
</div>

But it is not working.it is showing unexpected behaviour. It works fine in react .

Can anyone please give me an alternative solution or tell me how to fix the issue?

Here's the link where you can see the unexpected behaviour. https://diptnc.ml/about

Generally speaking, libraries that manage the DOM and libraries that directly manipulate the DOM don't play particularly well together, are you sure you need to use jQuery with your React? — DBS
– DBS, Commented Jul 5, 2022 at 14:54
i can use vanilla but i am having trouble to find the solution in vanilla js — Diptanu Chakraborty
– Diptanu Chakraborty, Commented Jul 5, 2022 at 17:24
Yeah, you shouldn't be doing any of that manual class swapping to begin with. It isn't a matter of converting to raw JavaScript, but of adopting a data-driven mindset. React changes classes for you when you set things up correctly. — isherwood
– isherwood, Commented Jul 5, 2022 at 20:25

Oluwafemi Sule · Accepted Answer · 2022-07-05 19:02:02Z

1

You can write an effect that sets the classname for elements in an array in a round-robin manner.

// Keep the interval id around so that 
// it can be cleared when unsubscribing the effect.
let activeFxId; 
/* 
Applies active class to an array of HTMLElement in a round-robin manner.
*/
function activeFx(elements) {
  activeFxId = setInterval(() => {
    const elementsArr = [...elements];
    let idx = elementsArr.findIndex((element) => {
      return element.classList.contains('active');
    });
    if (idx === -1) {
      idx = 0;
    }
    elementsArr[idx].classList.remove('active');
    elementsArr[(idx + 1) % elementsArr.length].classList.add('active');
  }, 2000);
  return () => {
    clearInterval(activeFxId);
  };
}

How you provide this array of elements is left to you. An approach is to store a ref to the parent element containing them and pass that on to the function.

For example,

/* Example component */

import React, {useEffect, useRef} from 'react';

export default () => {
  const ref = useRef();
  useEffect(() => {
    if (ref.current && ref.current.children) {
      return activeFx(ref.current.children);
    }
  });
  return (
    <div ref={ref}>
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  );
};

answered Jul 5, 2022 at 19:02

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

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

1 Comment

isherwood Over a year ago

Sure, but classes shouldn't be directly manipulated in a React app.

Collectives™ on Stack Overflow

Jquery code is not working in next js . Showing unexpected results but working on react

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