First I Initialize i18next inctance
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
const resources = {
en: {
translation: {
'Welcome to React': 'Welcome to React and react'
}
},
de: {
translation: {
'Welcome to React': 'Bienvenue à React et react-i18next'
}
}
};
i18n.use(initReactI18next).init({
resources,
lng: 'de',
interpolation: {
escapeValue: false
}
});
export default i18n;
and then I am using the instance with useTranslation hook in my component
import React from 'react'
import { useTranslation } from 'react-i18next'
import classes from './intro.module.scss'
export default function Intro() {
const { t, i18n } = useTranslation()
return (
<div className={classes.container}>
<div className={classes.innerContainer}>
<h1>{t('Welcome to React')}</h1>
</div>
</div>
)
}
so now how do I change the language to de from default language I initialized in i18n instance
I have a button on my navbar and I want that when I click on that button the languages should toggle.