React KTMenu
Hi,
I am using the data-kt-menu attribute to get the KT menu working.
I am using the react demo 8.
Unfortunately, the menu does not appear on click.
This is my code:
const LanguageSelect: FC = () => {
const lang = useLang()
const currentLanguage = languages.find((x) => x.lang === lang)
return (
<>
<div className="me-10">
<button
className="btn btn-flex btn-link btn-color-gray-700 btn-active-color-primary rotate fs-base"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-start"
>
<img
data-kt-element="current-lang-flag"
className="w-20px h-20px rounded me-3"
src={currentLanguage?.flag}
alt=""
/>
<span data-kt-element="current-lang-name" className="me-1">
{currentLanguage?.name}
</span>
<i className="ki-duotone ki-down fs-5 text-muted rotate-180 m-0"></i>
</button>
<div
className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-4 fs-7"
data-kt-menu="true"
id="kt_auth_lang_menu"
>
{languages.map((l) => (
<div className="menu-item px-3" onClick={() => setLanguage(l.lang)} key={l.lang}>
<a
href="#"
className={clsx("menu-link d-flex px-5", {
active: l.lang === currentLanguage?.lang,
})}
>
<span className="symbol symbol-20px me-4">
<img
data-kt-element="lang-flag"
className="rounded-1"
src={toAbsoluteUrl(l.flag)}
alt=""
/>
</span>
<span data-kt-element="lang-name">{l.name}</span>
</a>
</div>
))}
</div>
</div>
</>
)
}Am I doing something wrong? Do I have to initialize the menu somehow?
Best regards!
Replies (11)
What should I change in line 3?
A bit more detailed explanation would be great.
I think I found the problem, but I don't know where it's coming from or how to prevent that.
The problem is, that the menu is initialized twice.
I have a provider which renders a LoadingScreen while loading and the child components otherwise. Maybe that providers causes that problem?
I was able to identify the problem.
The
MasterInitThe ref
isFirstRunWould there be an problem if I set a data attribute to the body instead? That works fine as of now (but I don't know if this might cause futher problems).
Best regards
Hi,
Thank you for your feedback.
Unfortunately, we were not able to reproduce this problem in the latest Metronic version.
Do you have the same initialization problem on our preview page?
https://preview.keenthemes.com/metronic8/react/demo1/
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Thank you for reaching out to us.
We checked your code and your menu should work fine in the latest Metronic version.
Did you make any changes in our component initialization flow?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
thank you for the reply!
I did not make any changes to the initialization flow.
I am not 100% sure where the re-render is coming from. I think that it comes from on of the providers.
This is my app routes (the MasterInit is localized in the App component which is used for all routes):
const AppRoutes: FC = () => {
const {currentUser} = useAuth()
const {tenant} = useTenant()
return (
<BrowserRouter basename={PUBLIC_URL}>
<Routes>
<Route element={<App />}>
<Route path="error/*" element={<ErrorsPage />} />
<Route path="logout" element={<Logout />} />
{tenant ? (
currentUser ? (
<>
{/* Import all private routes from modules subdirectory */}
<Route path="*" element={<PrivateModuleRoutes />} />
<Route index element={<Navigate to="/dashboard" />} />
</>
) : (
<>
{/* Import all public routes from modules subdirectory */}
<Route path="auth/*" element={<ModuleRoutes />} />
<Route path="*" element={<Navigate to="/auth" />} />
</>
)
) : (
<Route path="*" element={<Navigate to="/error/tenant-not-found" />} />
)}
</Route>
</Routes>
</BrowserRouter>
)
}I think the re-render appears because of the tenant or the currentUser. Is there any possibility to change the behaviour if the MasterInit is rendered multiple times.
In my understanding, the ref should prevent the initialization from happening twice. So there must be some sort of re-render which resets the ref variable.
Best regards
Hi,
By default, our TypeScript components are initialized during the page first load. However, if you're fetching data asynchronously in your components, which triggers a component re-render, it can lead to the loss of certain events in your menu. In such cases, you should manually trigger the reinitialization of the menu component.
You can force the reinitialization of the component using the following code.
MenuComponent.reinitialization();Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks for the great support, I finally managed to fix the problem!
Best regards
Sebastian
Hi,
Glad to hear that. Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Your Support Matters!
How to i add this in Next JS with JS Lang?
