When I change language error fields in inputs doesn't change error string to another language. What can I do? Please, help!
Here is my antd field textinput with validation rules:
<FormField
rules={[
{
required: true,
message: t("errors.enter_organization_name"),
},
{
max: 50,
message: t("errors.title_should_be_less_than_50_character"),
},
]}
type="text"
/>
This is my change language select component for example:
import React, { useEffect, useState } from "react";
import { Select } from "antd";
import bem from "easy-bem";
import i18n from "i18next";
import "components/LocalizationButton/_localizationButton.less";
const languages = [
{
name_en: "English",
name: "Eng",
code: "en",
img: English
},
{
name_en: "Russian",
name: "Rus",
code: "ru",
img: Russian
}
];
const LocalizationButton = () => {
const b = bem("LocalizationButton");
const [lang, setLang] = useState("ru");
const { Option } = Select;
const [windowDimenion, detectHW] = useState({
winWidth: window.innerWidth
});
const detectSize = () => {
detectHW({
winWidth: window.innerWidth
});
};
useEffect(() => {
window.addEventListener("resize", detectSize);
return () => {
window.removeEventListener("resize", detectSize);
};
}, [windowDimenion.winWidth]);
const handleChange = (value) => {
i18n.changeLanguage(value);
setLang(value);
};
return (
<div className={b()}>
<div className="localizationButtonStyle">
<Select
className={windowDimenion.winWidth < 600 && "select-option-styles"}
size="large"
value={lang}
defaultValue={lang}
style={{
width: 140
}}
onChange={handleChange}
>
{languages?.map((option) => {
return windowDimenion.winWidth >= 600 ? (
<Option key={option.code} value={option.code}>
<img style={{ paddingRight: "5px" }} alt={option.name} src={option.img} />
{option.name_en}
</Option>
) : (
<Option key={option.code} value={option.code}>
<img alt={option.name} src={option.img} />
</Option>
);
})}
</Select>
</div>
</div>
);
};
export default LocalizationButton;
What can I do with update change language? If I use useEffect hook, but how?