Unable to use conditional render with Preline Js features about preline HOT 2 OPEN

i noticed same behaviour for "modal" as well
in order to handle it, i made the div as "hidden" and based on condition i'm removing/adding the "hidden" class.

another solution:
use within component, that is rendered conditionaly.

useEffect(() => {
window.HSStaticMethods.autoInit();
}, []);

from preline.

Your PrelineScript component has a useEffect which calls autoInit() whenever the path name changes. This means any time you navigate, your components that re-render get re-initialized.

Routing is effectively "conditionally rendering" whichever page is defined for that pathname/route. So conditional rendering does work with Preline.

You need to do the same with your Accordion. You need to re-initialize your accordion every time your dependency for conditional rendering changes. In your case, this is your state bool. You could have a useEffect in your Accordion.tsx component which re-runs window.HSAccordion.autoInit() every render, or you could lift it up one level and have your useEffect in the page.tsx component and have state in your useEffect's dependency array.

Edit: Just read #350 (comment) which suggests this method could lead to a memory leak. You might be better off following @olegpix's example of using the JS constructor instead. Another option could be to call HSStaticMethods.cleanCollection() before your autoInit which effectively flushes out all your Preline instances before re-initializing them.

from preline.