I can't change React-Dates Language!

[HakanSungur]

react-dates version
react-dates@21.8.0

Describe the bug
I can't change React-Dates Language!

Index.jsx

import ReactDOM from "react-dom";
//
import "./i18n.js";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import "rc-slider/assets/index.css";
import App from "./App";

//
import 'moment/locale/af';
import 'moment/locale/ar-dz';
import 'moment/locale/ar-kw';
import 'moment/locale/ar-ly';
import 'moment/locale/ar-ma';
import 'moment/locale/ar-sa';
import 'moment/locale/ar';
import 'moment/locale/az';
import 'moment/locale/be';
import 'moment/locale/bg';
import 'moment/locale/bm';
import 'moment/locale/bn-bd';
import 'moment/locale/bn';
import 'moment/locale/bo';
import 'moment/locale/br';
import 'moment/locale/bs';
import 'moment/locale/ca';
import 'moment/locale/cs';
import 'moment/locale/cv';
import 'moment/locale/cy';
import 'moment/locale/da';
import 'moment/locale/de-at';
import 'moment/locale/de-ch';
import 'moment/locale/de';
import 'moment/locale/dv';
import 'moment/locale/el';
import 'moment/locale/en-au';
import 'moment/locale/en-ca';
import 'moment/locale/en-ie';
import 'moment/locale/en-il';
import 'moment/locale/en-in';
import 'moment/locale/en-nz';
import 'moment/locale/eo';
import 'moment/locale/es-do';
import 'moment/locale/es-mx';
import 'moment/locale/es-us';
import 'moment/locale/es';
import 'moment/locale/et';
import 'moment/locale/eu';
import 'moment/locale/fa';
import 'moment/locale/fi';
import 'moment/locale/fil';
import 'moment/locale/fr-ca';
import 'moment/locale/fr-ch';
import 'moment/locale/fr';
import 'moment/locale/fy';
import 'moment/locale/ga';
import 'moment/locale/gd';
import 'moment/locale/gl';
import 'moment/locale/gom-deva';
import 'moment/locale/gom-latn';
import 'moment/locale/gu';
import 'moment/locale/he';
import 'moment/locale/hi';
import 'moment/locale/hu';
import 'moment/locale/hy-am';
import 'moment/locale/id';
import 'moment/locale/is';
import 'moment/locale/it-ch';
import 'moment/locale/it';
import 'moment/locale/ja';
import 'moment/locale/jv';
import 'moment/locale/ka';
import 'moment/locale/kk';
import 'moment/locale/km';
import 'moment/locale/kn';
import 'moment/locale/ko';
import 'moment/locale/ku';
import 'moment/locale/ky';
import 'moment/locale/lb';
import 'moment/locale/lo';
import 'moment/locale/lt';
import 'moment/locale/lv';
import 'moment/locale/me';
import 'moment/locale/mi';
import 'moment/locale/mk';
import 'moment/locale/ml';
import 'moment/locale/mn';
import 'moment/locale/mr';
import 'moment/locale/ms-my';
import 'moment/locale/ms';
import 'moment/locale/mt';
import 'moment/locale/my';
import 'moment/locale/nb';
import 'moment/locale/nl-be';
import 'moment/locale/nl';
import 'moment/locale/nn';
import 'moment/locale/oc-lnc';
import 'moment/locale/pa-in';
import 'moment/locale/pl';
import 'moment/locale/pt-br';
import 'moment/locale/pt';
import 'moment/locale/ro';
import 'moment/locale/sd';
import 'moment/locale/se';
import 'moment/locale/si';
import 'moment/locale/sk';
import 'moment/locale/sl';
import 'moment/locale/sq';
import 'moment/locale/sr-cyrl';
import 'moment/locale/sr';
import 'moment/locale/sv';
import 'moment/locale/sw';
import 'moment/locale/ta';
import 'moment/locale/tet';
import 'moment/locale/tg';
import 'moment/locale/tk';
import 'moment/locale/tl-ph';
import 'moment/locale/tlh';
import 'moment/locale/tr';
import 'moment/locale/tzl';
import 'moment/locale/tzm-latn';
import 'moment/locale/tzm';
import 'moment/locale/ug-cn';
import 'moment/locale/uk';
import 'moment/locale/ur';
import 'moment/locale/uz-latn';
import 'moment/locale/uz';
import 'moment/locale/vi';
import 'moment/locale/x-pseudo';
import 'moment/locale/yo';
import 'moment/locale/zh-cn';
import 'moment/locale/zh-hk';
import 'moment/locale/zh-mo';
import 'moment/locale/zh-tw';

const store = configureStore();
ReactDOM.render(
 
  <Provider store={store}>
    <React.Suspense fallback="loading">
      <App />
    </React.Suspense>
  </Provider>,
  document.getElementById("root")
);

reportWebVitals();

App.jsx

import { useEffect, useState, useLayoutEffect } from "react";
import { useTranslation } from "react-i18next";
import moment from "moment";

function App() {

  const {i18n:{language},} =useTranslation();

  useLayoutEffect(() => {
    moment.locale(language);
  }, [language]);

HeroSearchForm

import ExperiencesSearchForm from "./ExperiencesSearchForm";
import StaySearchForm from "./StaySearchForm";
import RentalCarSearchForm from "./RentalCarSearchForm";
import FlightSearchForm from "./FlightSearchForm";
import BussesSearchForm from "./BussesSearchForm";
import { useTranslation } from "react-i18next";

const HeroSearchForm = ({
}) => {

  const { t } = useTranslation();
  const tabs = [
    {
      id: "Stays",
      name: t("heroSearchForm1"),
    },
    {
      id: "Experiences",
      name: t("heroSearchForm2"),
    },
    {
      id: "Cars",
      name: t("heroSearchForm3"),
    },
    {
      id: "Flights",
      name: t("heroSearchForm4"),
    },
    {
      id: "Busses & Transfers",
      name: t("heroSearchForm5"),
    },
  ];
  const [tabActive, setTabActive] = useState(currentTab);

  const renderTab = () => {

    return (
      <ul className="ml-2 sm:ml-6 md:ml-12 flex space-x-5 sm:space-x-8 lg:space-x-7 overflow-x-auto hiddenScrollbar">
        {tabs.map((tab) => {
          const active = tab.id === tabActive;
          return (
            <li
              onClick={() => setTabActive(tab.id)}
              className={`flex-shrink-0 flex items-center cursor-pointer text-sm lg:text-base font-medium ${
                active
                  ? ""
                  : "text-neutral-600 hover:text-neutral-800 dark:hover:text-neutral-500"
              } `}
              key={tab.id}
            >
              {active && (
                <span className="block w-2.5 h-2.5 rounded-full bg-neutral-800 dark:bg-neutral-100 mr-2" />
              )}
              <span>{tab.name}</span>
            </li>
          );
        })}
      </ul>
    );
  };

  const renderForm = () => {
    const isArchivePage = !!currentPage && !!currentTab;
    
    switch (tabActive) {
      case "Stays":
        return <StaySearchForm haveDefaultValue={isArchivePage} />
      case "Experiences":
        return <ExperiencesSearchForm haveDefaultValue={isArchivePage} />;
      case "Cars":
        return <RentalCarSearchForm haveDefaultValue={isArchivePage} />;
      case "Flights":
        return (
          <FlightSearchForm
            haveDefaultValue={isArchivePage}
            isBidDataChanged={isBidDataChanged}
            setIsBidDataChanged={setIsBidDataChanged}
          />
        );
      case "Busses & Transfers":
        return (
          <BussesSearchForm
            haveDefaultValue={isArchivePage}
            isBusBidDataChanged={isBusBidDataChanged}
            setIsBusBidDataChanged={setIsBusBidDataChanged}
          />
        );

      default:
        return null;
    }
  };

  return (
    <div
      className={`nc-HeroSearchForm w-full max-w-6xl py-5 lg:py-0 ${className}`}
      data-nc-id="HeroSearchForm"
    >
      {renderTab()}
      {renderForm()}
    </div>
  );
};

export default HeroSearchForm;

StaySearchForm.Jsx

import StayDatesRangeInput from "./StayDatesRangeInput";
import moment from "moment";
import { useTranslation } from "react-i18next";

const defaultLocationValue = "";
const defaultDateRange = {
  startDate: moment(new Date()).add(7, "days"),
  endDate: moment(new Date()).add(11, "days"),
};

const defaultGuestValue = {
  guestAdults: 2,
  guestChildren: 0,
  guestInfants: 0,
};

const StaySearchForm = ({ haveDefaultValue = false }) => {
  const [dateRangeValue, setDateRangeValue] = useState(defaultDateRange);
  const [locationInputValue, setLocationInputValue] = useState("");
  const [guestValue, setGuestValue] = useState(defaultGuestValue);
  const [dateFocused, setDateFocused] = useState(null);
  const [cities, setCities] = useState([]);
  const [countries, setCountries] = useState([]);
  const [regions, setRegions] = useState([]);
  const [stays, setStays] = useState([]);
  const [concatenatedData, setConcanetedData] = useState([]);
  let history = useHistory();
  const [pathName, setPathName] = useState("/stays");
  const { t } = useTranslation();

  const renderForm = () => {
    return (
      <form className="w-full relative mt-8 flex flex-col md:flex-row md:items-center rounded-3xl lg:rounded-full shadow-xl dark:shadow-2xl bg-white dark:bg-neutral-900 divide-y divide-neutral-200 dark:divide-neutral-700 md:divide-y-0">
        <LocationInput
          dropDownData={dropDownData}
          defaultValue={locationInputValue}
          onChange={(e) => setLocationInputValue(e)}
          onInputDone={() => setDateFocused("startDate")}
          placeHolder={t("staySearchForm1")}
          desc={t("staySearchForm2")}
        />
        <StayDatesRangeInput
          defaultValue={dateRangeValue}
          defaultFocus={dateFocused}
          onFocusChange={(focus) => setDateFocused(focus)}
          onChange={(data) => setDateRangeValue(data)}
        />
        <GuestsInput
          defaultValue={guestValue}
          onChange={(data) => setGuestValue(data)}
        />
        <div className="px-4 py-4 lg:py-0">
          <ButtonSubmit
            to={`${pathName}?locationInputValue=${locationInputValue}&startDate=${dateRangeValue.startDate}&endDate=${dateRangeValue.endDate}&guestAdults=${guestValue.guestAdults}&guestChildren=${guestValue.guestChildren}&guestInfants=${guestValue.guestInfants}`}
          />
        </div>
      </form>
    );
  };

  return renderForm();
};

export default StaySearchForm;

StayDatesRangeInput

import { DateRangePicker } from "react-dates";
import moment from "moment";

const StayDatesRangeInput = ({
  defaultValue,
  onChange,
  defaultFocus = null,
  onFocusChange,
  fieldClassName = "[ nc-hero-field-padding ]",
  wrapClassName = "divide-y divide-neutral-200 dark:divide-neutral-700 lg:divide-y-0 md:border-l md:border-r border-neutral-200 lg:border-none",
  numberOfMonths,
  anchorDirection,
}) => {
  const [focusedInput, setFocusedInput] = useState(defaultFocus);
  const [stateDate, setStateDate] = useState(defaultValue);
  const { t } = useTranslation();
  const windowSize = useWindowSize();

  useEffect(() => {
    setStateDate(defaultValue);
  }, [defaultValue]);

  useEffect(() => {
    setFocusedInput(defaultFocus);
  }, [defaultFocus]);

  useEffect(() => {
    if (onChange) {
      onChange(stateDate);
    }
  }, [stateDate]);

  const handleClearData = (field) => {
    switch (field) {
      case "checkIn": {
        return setStateDate((date) => ({ ...date, startDate: null }));
      }
      case "checkOut": {
        return setStateDate((date) => ({ ...date, endDate: null }));
      }

      default:
        break;
    }
  };

  const handleDateFocusChange = (focus) => {
    setFocusedInput(focus);
    onFocusChange && onFocusChange(focus);
  };

  const renderInputCheckInDate = () => {
    const focused = focusedInput === "startDate";
    return (
      <div
        className={`relative flex flex-1 ${fieldClassName} flex-shrink-0 items-center space-x-3 cursor-pointer ${
          focused ? "shadow-2xl rounded-full dark:bg-neutral-800" : " "
        }`}
        onClick={() => handleDateFocusChange("startDate")}
      >
        <div className="flex-grow">
          <span className="block xl:text-lg font-semibold">
            {stateDate.startDate
              ? stateDate.startDate.format("DD MMM")
              : t("stayDateRangeInput1")}
          </span>
          <span className="block mt-1 text-sm text-neutral-500 leading-none font-light">
            {stateDate.startDate
              ? t("stayDateRangeInput1")
              : t("stayDateRangeInput2")}
          </span>
          {stateDate.startDate && focused && (
            <ClearDataButton onClick={() => handleClearData("checkIn")} />
          )}
        </div>
      </div>
    );
  };

  const renderInputCheckOutDate = () => {
    const focused = focusedInput === "endDate";
    return (
      <div
        className={`relative flex flex-1 ${fieldClassName} flex-shrink-0 items-center space-x-3 cursor-pointer ${
          focused ? "shadow-2xl rounded-full dark:bg-neutral-800" : " "
        }`}
        onClick={() => handleDateFocusChange("endDate")}
      >
        <div className="flex-grow">
          <span className="block xl:text-lg font-semibold">
            {stateDate.endDate
              ? stateDate.endDate.format("DD MMM")
              : t("stayDateRangeInput3")}
          </span>
          <span className="block mt-1 text-sm text-neutral-500 leading-none font-light">
            {stateDate.endDate
              ? t("stayDateRangeInput3")
              : t("stayDateRangeInput3")}
          </span>
          {stateDate.endDate && focused && (
            <ClearDataButton onClick={() => handleClearData("checkOut")} />
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="relative flex-shrink-0 flex z-10 [ lg:nc-flex-2 ] ">
      <div className="absolute inset-x-0 bottom-0">
        <DateRangePicker
          startDate={stateDate?.startDate}
          endDate={stateDate?.endDate}
          focusedInput={focusedInput}
          onDatesChange={(date) => setStateDate(date)}
          onFocusChange={handleDateFocusChange}
          startDateId={"nc-hero-stay-startDateId"}
          endDateId={"nc-hero-stay-endDateId"}
          daySize={windowSize.width > 1024 ? 56 : undefined}
          orientation={"horizontal"}
          showClearDates
          noBorder
          keepOpenOnDateSelect
          hideKeyboardShortcutsPanel
          numberOfMonths={
            numberOfMonths || (windowSize.width <= 1024 ? 1 : undefined)
          }
          anchorDirection={anchorDirection}
        />
      </div>

      <div
        className={`flex flex-col lg:flex-row lg:items-center w-full flex-shrink-0 relative  ${wrapClassName}`}
      >
        {renderInputCheckInDate()}

        {renderInputCheckOutDate()}
      </div>
    </div>
  );
};

export default StayDatesRangeInput;

**Only the first tab does not change. Other tabs are being translated into Turkish.

**PLEASE HELP ME!

[ljharb]

Instead of a massive code dump, could you provide a codesandbox?

[HakanSungur]

I m sory. I tried but microVM not worked on https://codesandbox.io/

[ljharb]

I'm not sure what that is, but one of the points of the exercise is to reduce your code to a minimal repro.

[HakanSungur]

I shortened the code, I would appreciate it if you could answer it.

[HakanSungur]

StayDatesRangeInput import 'moment/locale/tr'; When I say it, it is translated into Turkish, but this time it remains constant.

[ljharb]

I can't debug it without something I can run, so I'm going to close this. I'm happy to reopen it and take a look if you can produce a minimal runnable repro.