How can I close sub-level items properly, in my Accordion (React)?

[enda]

Hello, I'm kind of new to coding world and making my portfolio.  It's nice that I can use GSAP animation for my project.

But I've been stuck with  making Accordian menu.

I declared some useRefs to controll the Dom elements with Gsap animation, as I read GSAP tutorials with React.

and I made some timelines inside of useEffect, I made some functions to handle event and useRefs.

 

It works when I don't type on input component that I created next to the accordion ('category')

It's expanded to level 1 menus of category, and when I click the single menu(level 1), then the level2 menu is expanded.

and If I click another level1 menus of category, the level2 menu that was just opened , is closed automatically, and the level2 menu for the level1 menu that I click currently is expanded.

Also, if I click the main button(like header, it says 'category' in my demo) ,everything is closed automatically.

 

But It doesn't work properly once I type something on input component.

the level2 menu is not closed properly, Although I click another level1 menu. and When I click the main button, level1 menus are closed but the level2 menu that was expanded still remains. Guess reverse() animation doesn't work properly when I type or create another event.

 

I made a simple version of demo , I commented out some other animations in Search.js (just in case if it helpful to understand about this problem,I didn't remove) 

main animation for this issue is in CateGory.js .

Also I commented out some explanation about my code.

I would really appreciate if someone can halp me.

my demo

[OSUblake]

Welcome to the forums @enda

 

Did you see our React tutorials?

 

6 hours ago, enda said:

But It doesn't work properly once I type something on input component.

 

Changing the input causes React to re-render, which calls your CateGory component again, which is clearing out the DeepAnim array you created in your effect. So just comment this out.

 

const DeepAnim = useRef([]); // for the animations

// Don't do this for an array that needs to persists between renders
// DeepAnim.current = []; 

 

Also, a timeline doesn't have an ease property. Perhaps you meant to use it in the defaults.

 

// bad
const headani = gsap.timeline({ ease: "expo.inOut" });

// good
const headani = gsap.timeline({
  defaults: {
    ease: "expo.inOut"
  }
});

 

 

[enda]

Hello! @OSUblake

Thanks for your help!

That is awesome! I completely missed the fact that input causes React to re-render.

It might be more about React, but just one thing that I want to understand clearly,

 the reason that other arrays(cateHeadRef.current, cateGoryRef.current) exist when the re-render happns, is that I created the functions to push elements to cateHeadRef.current / cateGoryRef.current , outside of useEffect ?

 

 

[OSUblake]

22 hours ago, enda said:

t might be more about React, but just one thing that I want to understand clearly,

 the reason that other arrays(cateHeadRef.current, cateGoryRef.current) exist when the re-render happns, is that I created the functions to push elements to cateHeadRef.current / cateGoryRef.current , outside of useEffect ?

 

 

Correct. The arrays that are for the DOM refs are filled every time React re-renders. However, the array with the animation will only be filled one time inside the useEffect.

 

[enda]

I got it now. Thank you so much for the explanation! It was helpful!