Search code examples
reactjsreact-reduxantdlinguijs

React antd LinguiJS not working on Modal method

I tried to translate the title in antd modal.confirm() but I always receive an error useLingui hook was used without I18nProvider. In other pages the translation is working fine.

Here is my code:

async function onLogout() {
    Modal.confirm({
        title: <Trans>Confirm Logout</Trans>,
        icon: <LogoutOutlined />,
        content: <Trans>Are you sure you want to logout?</Trans>,
        async onOk() {
            const logout = await dispatch(logoutUser())
            if (logout === "Success") {
                history.push("/login")
            }
        },
    })
}
Solution

  • i wrap in seperate I18nProvider for ant d modal.method context

       const comfirmLogoutMessage = (
    <I18nProvider i18n={i18n}>
      <Trans>Confirm Logout</Trans>
    </I18nProvider>
)