BUG react i18next doesn't update validation error in antd

Viewed 11

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?

0 Answers
Related