How to set select option with page reload React?

user_13373755 0
Viewed 821

I don't know much about react, but now I have a simple API and want to receive data in different languages by selecting the language option in the special component.

LanguageSelect.js:

import React, { useState } from "react";
import { useLanguage } from "../context/Language";
import { Route, useHistory } from "react-router";

const LanguageSelector= () => {
  const { language, setLanguage } = useLanguage();
  const history = useHistory();
  console.log(language);

  return (
    <Route
      render={({ history }) => (
        <select
          value={language}
          onChange={(event) => {
            // ! reloads but forces value to default
            // history.go(0);

            // ! reloads but forces value to default
            // let currentUrl = window.location.pathname;
            // history.push(currentUrl);
            // window.location.reload(false);

            // ! reloads but forces value to default
            // localStorage.setItem('langSelect', event.target.value);
            // window.location.reload(false);
            // setLanguage(localStorage.getItem('langSelect'));

            // * works fine but redirect
            history.push("/");

            // *setting language
            setLanguage(event.target.value);
          }}
        >
          <option value="Rus">Русский</option>
          <option value="Eng">English</option>
          <option value="Fr">Français</option>
        </select>
      )}
    />
  );
};

export default LanguageSelector;

./context.Lanuage.js:

import React, { createContext, useContext, useMemo, useState } from "react";

const LanguageContext = createContext();

const useLanguage = () => {
  const [language, setLanguage] = useContext(LanguageContext);

  return { language, setLanguage };
};

const LanguageProvider = (props) => {
  const [language, setLanguage] = useState("Rus");
  const value = useMemo(() => [language, setLanguage], [language]);

  return <LanguageContext.Provider value={value} {...props} />;
};

export { LanguageProvider, useLanguage };

So, to get my fetch request in other components, I have to reload the page. And as you can see by the comments, the only way to receive data is by redirecting to the default location ("/") right after selecting the language. If I do all other things which are commented, the page simply reloads and sets the default select value

react-native reactjs javascript
1 Answers

There's no way to keep states after reloading the page. What i think you should try to do is to store the selected language in localStorage/cookies/database or whatever option you'd like to and then fetch that data inside a useEffect() in your context.

Something like this:

LanguageSelect.js

import React, { useState } from "react";
import { useLanguage } from "../context/Language";
import { Route, useHistory } from "react-router";

const LanguageSelector= () => {
  const { language, setLanguage } = useLanguage();
  const history = useHistory();
  console.log(language);

  return (
    <Route
      render={({ history }) => (
        <select
          value={language}
          onChange={(event) => {
            localStorage.setItem('langSelect', event.target.value);
            history.push("/");
          }}
        >
          <option value="Rus">Русский</option>
          <option value="Eng">English</option>
          <option value="Fr">Français</option>
        </select>
      )}
    />
  );
};

export default LanguageSelector;

./context.Lanuage.js:

    import React, { createContext, useContext, useMemo, useState, useEffect } from "react";
    
    const LanguageContext = createContext();
    
    const useLanguage = () => {
      const [language, setLanguage] = useContext(LanguageContext);       
    
      return { language, setLanguage };
    };
    
    const LanguageProvider = (props) => {
      const [language, setLanguage] = useState("Rus");

      useEffect(() => {
             setLanguage(localStorage.getItem('langSelect'));
      }, [])

      const value = useMemo(() => [language, setLanguage], [language]);
    
      return <LanguageContext.Provider value={value} {...props} />;
    };
    
    export { LanguageProvider, useLanguage };
user_124812780
Related