The problem is:
There is a landing page, a language switch added with ant design, specifically, through Select / Option. The translation was done via i18react lib. So, it is necessary that when the page is reloaded, the selected language is displayed in the dropdown itself, and not reset to the default Language. I know what can be done through document.cookie. But how? Well, I'll put languages in cookies. And then, how to screw them into this Select so that the display of the selected language is saved on reboot?
My code is here and I don't know what to do.
const Option = Select.Option;
function ChangeLanguageDropdown({}) {
const {i18n} = useTranslation();
const changeLanguage = (lang) => {
i18n.changeLanguage(lang);
};
Cookies.set('ru', 'Русский', { expires: 7 });
Cookies.set('en', 'English', { expires: 7 });
return (
<div>
<Select defaultValue={"Language"} style={{ width: 110}} onChange={changeLanguage}>
<Option value="ru">{i18next.t("Русский")}</Option>
<Option value="en">{i18next.t("English")}</Option>
</Select>
</div>
const {useState} = React
const { Select } = antd
const { Option } = Select;
const ChangeLanguageDropdown = ({}) => {
const [lang, setLang] = useState('en' /* Cookie.get('path.to.cookie') */);
const changeLanguage = (lang) => {
setLang(lang);
/* Cookie.set('path.to.cookie', lang); */
/* call i18n.changeLanguage(lang); */
};
return (
<div><div>{lang}</div>
<Select defaultValue={lang} style={{ width: 500}} onChange={changeLanguage}>
<Option value="ru">"Русский"</Option>
<Option value="en">"English"</Option>
</Select>
</div>);
}
ReactDOM.render(<ChangeLanguageDropdown />, document.body)
Note that I've removed all i18n related code as well as Cookie lib (your setup of Codepen was #R%T$). Next time, start with some example that actually works (e.g. https://codepen.io/mugiseyebrows/pen/ExyJJQQ?editors=1111)